做网站的，我们都知道尽量减少请求数，压缩CSS代码量，使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度，也就是优化网站的性能。

下面分析了一些CSS的书写方式，很多都是我们知道并且正在使用的，这里记录一下，提醒自己以后写CSS的时候尽量从这些方面出发来使用，对于CSS的性能提升有很大的帮助，对于你自己写出来的代码也更加的靠谱了。

本文摘录之“高效CSS开发核心”，一些我认为是已经不需要用规则来约束的就不再啰嗦了，感兴趣的读者可以去看全文。

1.把CSS文件放在<head>中，避免使用@import（因为使用了import之后就相当于把另外的CSS放在了标签的底部）

2.避免使用CSS表达式，CSS表达式只在IE中有用，他执行的次数随着页面的缩小、放大和滚动等都会出现变化。

3.HTML标签使用小写

<!-- Not recommended -->

<A HREF="/">Home</A>

<!-- Recommended -->

<img src="google.png" alt="Google">

4.使用UTF-8编码

html中： <meta charset="utf-8"> css中： @charset "utf-8";

5.不要使用实体引用

比如“>”尽量写成"&gt;"

6.省略零值后面的单位和省掉起始的0值

margin: 0; padding: 0; font-size: .8em;

7.使用高效的CSS选择符

8.避免tag+id或者class+id

button#goButton {...};----->>#goButton .fundation#testIcon {...};----->>#testIcon

9. 关于tag+class

button.indented {...}----->>.button-indented {...}

程序员们经常会给某个 Class 前面加上标签名称（Tag Name），以更精确且快速的定位该节点，但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型（Tag）而导致的样式失效的情况，做到样式与元素的 分离，两者独立维护。

10. 尽量避免后代选择器

就是说要多用子类选择器这种方式（IE6不支持），“>”

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。

11. 发布之前一定要进行压缩

可使用YUI Compressor或类似软件进行压缩后再发布。

12. 省略嵌入资源的协议

即可避免混合内容问题（mixed content issues）也可以缩减文件大小，这个倒是可以尝试，不过不建议，有些可能看不懂。

<!-- Not recommended -->

<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* Not recommended */

.example { background: url(http://www.google.com/images/example); }

/* Recommended */

.example { background: url(//www.google.com/images/example); }

13. 文件结构

我觉得这个倒是可以有，不过如果是项目的话，我怕设计到的CSS文件太多，造成管理不便，如果是内容较少的情况下可以用这种方式。

由于图像等资源一般只有CSS文件使用，故可将图像文件夹放到CSS文件同级目录，这样就可使用相对路径，节省字节数

input {background: url("images/shadow background.gif");}

14. 文件夹命名

这个推荐使用这种方式，不过有一些主题等是习惯了使用复数了，具体情况具体分析，可以使用尽量用下面这种单数。

通常文件夹会被命名为其所代表的资源的复数形式

images assets fonts

其实大可不必，使用单数形式可以节省许多字节，尤其是当每个项目的结构都类似时

img asset font

对于下面一段包含58字节的代码：

input {background: url("/images/shadow background.gif");}

优化后变为52字节，即10%的压缩：

input {background: url(img/shadow-background.gif);}

如果在使用缩写，则可进一步缩减：

input {background: url(img/shadow-bg.gif);}

如果一个项目有几百行这样的代码，那么就会节省几百字节了。如果站点访问量超大，则可节省数目客观的带宽资源。

15. 滤镜简写

selector { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); }

filter的版本是IE8以下的，–ms-filter的版本是IE9以上的，YUI会将其压缩为：

selector { -ms-filter:"alpha(opacity=65)"; filter:alpha(opacity=65); }

由于YUI的广泛使用极其社区开发着的强大力量，说明这种写法已经是经过深度测试的写法，可以放心使用。

16 Gzip压缩与CSS书写

这个仁者见仁智者见智，有些人认为从CSS的加载方式（即CSS先确定显示、位置、整体）。

Goolge建议按照字母顺序书写CSS规则，方便维护。其他公司也有自己的规范。从Gzip压缩角度，只要整个文档中的书写顺序保持一致即可，可以提高Gzip压缩比率。

background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

17 更少的请求比更小的尺寸重要

文件可以适当的合并，只保留基本的层级即可

<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" />

<link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" />

<link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />

实际应用中当然不可能做到上面这么多的要点，而且也需要根据项目的差异来做出调整，这里整体上我觉得是可以给我一点启发的，比如不要使用“标签+类名、标签+ID、使用单数的文件结构、把图片放在CSS的同级目录、滤镜的简写、更少的请求

高效CSS开发核心要点摘录的更多相关文章

  1. 自动化高效css开发，畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  2. 35款加速网站开发的 CSS 开发工具

    网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...

  3. dubbo核心要点及下载（dubbo二）

    一.dubbo核心要点 1):服务是围绕服务提供方和服务消费方的,服务提供方实现服务,服务消费方调用服务. 2):服务注册 对于服务提供方它需要发布服务,而由于应用系统的复杂性,服务的数量.类型不断的 ...

  4. Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理

    Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理 说明:Java生鲜电商平台中,我们将进一步理解微服务架构的核心要点和实现原理,为读者的实践提供微服务的设计模式,以期让微服务 ...

  5. 阿里内部资料：Android开发核心知识笔记共2100页，58万字，完整版开放下载

    作为一个3-5年的Android工程师,我们经常会遇到这些瓶颈: 1.技术视野窄长期在小型软件公司,外包公司工作,技术视野被限制的太厉害 2.薪资提升难初中级Android岗位薪资上升空间有限,基本上 ...

  6. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  7. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  8. 【转】精心推荐几款超实用的 CSS 开发工具

    原文转自:http://www.html5cn.org/article-5741-1.html 摘要: 当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文 ...

  9. 值得拥有！精心推荐几款超实用的 CSS 开发工具

    当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...

随机推荐

  1. javascript的几种时间格式

    1.当前系统区域设置格式(toLocaleDateString和toLocaleTimeString) 例子:(new Date()).toLocaleDateString() + " &q ...

  2. C#根据函数名称执行对应的函数

    using System; using System.Collections.Generic; using System.Reflection; namespace test { public cla ...

  3. hdu1004Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  4. zoj1093 Monkey and Banana

    写到现在,发现1025,1076之前写的都是同一种题型:关于DAG的最长路(最短路). 首先要建立模型,根据关系,确定点和点之间的关系,构成一个DAG,前面几道题每个点之间距离默认为1,这一道题不同点 ...

  5. Linux系统学习笔记：文件描述符标志

    文件描述符标志的概念 文件描述符标志(目前就只有一个close-on-exec): 它仅仅是一个标志,当进程fork一个子进程的时候,在子进程中调用了exec函数时就用到了这个标志.意义是执行exec ...

  6. Redis的安装和配置

    在网站redis.io复制下载链接 wget http://download.redis.io/releases/redis-3.0.5.tar.gz tar zxvf redis-3.0.5.tar ...

  7. Normalize.css 介绍与源码解读

    开始 Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代. 它正是针对只需要统一的元素样式.该项目 ...

  8. 重新理解一遍UpdatePanel

    楼主只是想每天写点东西这样帮助自己的一个累积吧. 说明:楼主现在已经清楚了AJAX是怎么回事了,现在由于工作原因又摆弄起了UpdatePanel所以从AJAX的角度来分析一下UpdatePanel的使 ...

  9. 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

    :hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮

  10. Django后台管理界面

    之前的几篇记录了模板视图.模型等页面展示的相关内容,这篇主要写一下后台admin管理界面的内容. 激活管理界面 Django管理站点完全是可选择的,之前我们是把这些功能给屏蔽掉了.记得上篇中Djang ...