高效CSS开发需要注意的要点以及提升性能的做法

本文参考了业界规范及主流趋势，详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题，希望对您有所帮助，也可收藏作为参考。

1. 基本原则

1.1 把CSS放在HTML页面头部

由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部。

@import 相当于把 标签放在页面的底部，因此从优化性能的角度考虑，应避免使用 @import。

1.2 避免使用 CSS Expressions

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

1.3 CSS简写

1.3.1 16进制颜色值简写

/* Not recommended */
   color: #eebbcc;

/* Recommended */
   color: #ebc;

1.3.2 属性值简写

   margin-top: 2px;
   margin-right: 5px;
   margin-bottom: 2em;
   margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px; 

   border-width: 1px;
   border-style: solid;
   border-color: #000     ----->>     border: 1px solid #000 

   font-style: italic;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 1em;
   line-height: 140%;
   font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 

   background-color: #f00;
   background-image: url(background.gif);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 

   list-style-type: square;
   list-style-position: inside;
   list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif) 

1.4 尽量抽取相似部分

   .class1{position: absolute; left: 20px; top: 30px;}
   .class2{position: absolute; left: 20px; top: 30px;}
   .class3{position: absolute; left: 20px; top: 30px;}
   .class4{position: absolute; left: 20px; top: 30px;}
   .class5{position: absolute; left: 20px; top: 30px;}
   .class6{position: absolute; left: 20px; top: 30px;} 
   -------------------->>>>>>> 
   .class1 .class2 .class3 .class4 .class5 .class6{
   Position: absolute; left: 20px; top: 20px;
   }

2. 关键要点

2.1 只使用小写

<!-- Not recommended -->
<A HREF="/">Home</A>

<!-- Recommended -->
<img src="google.png"   The currency symbol for the Euro is "&eur;".

<!-- Recommended -->
   The currency symbol for the Euro is "€".

2.9 使用带有语义的id和class

/* Not recommended: meaningless */
   #yee-1901 {}

/* Not recommended: presentational */
   .button-green {}
   .clear {}

/* Recommended: specific */
   #gallery {}
   #login {}
   .video {}

/* Recommended: generic */
   .aux {}
   .alt {}

2.10 省略零值的单位

margin: 0;
padding: 0;

2.11 省略起始的零

font-size: .8em;

2.12 尽量避免CSS hacks

尝试换种解决方案