作网站的，咱们都知道尽可能减小请求数，压缩CSS代码量，使用高效CSS选择符等方式能够来提升网站的载入速度和访问速度，也就是优化网站的性能。css
下面分析了一些CSS的书写方式，不少都是咱们知道而且正在使用的，这里记录一下，提醒本身之后写CSS的时候尽可能从这些方面出发来使用，对于CSS的性能提高有很大的帮助，对于你本身写出来的代码也更加的靠谱了。html
本文摘录之“高效CSS开发核心”，一些我认为是已经不须要用规则来约束的就再也不啰嗦了，感兴趣的读者能够去看全文。前端
1.把CSS文件放在<head>中，避免使用@import（由于使用了import以后就至关于把另外的CSS放在了标签的底部）程序员
2.避免使用CSS表达式，CSS表达式只在IE中有用，他执行的次数随着页面的缩小、放大和滚动等都会出现变化。web
3.html标签使用小写dom
<!-- Not recommended --> <A HREF="/">Home</A> <!-- Recommended --> <img src="google.png" alt="高效CSS开发核心要点摘录" alt="Google">
4.使用UTF-8编码ide
html中： <meta charset="utf-8"> css中： @charset "utf-8";
5.不要使用实体引用svn
好比“>”尽可能写成">"post
6.省略零值后面的单位和省掉起始的0值性能
margin: 0; padding: 0; font-size: .8em;
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的同级目录、滤镜的简写、更少的请求。