在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。
便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。
如果有嵌套定义，可以采取内部单行的形式。
/* 单行定义一个选择器 */
.m-list li, .m-list h3 { width:100px; padding:10px; border:1px solid #ddd;}
/* 这是一个有嵌套定义的选择器 */
@media all and (max-width:600px) {
.m-class1 .itm { height:17px; line-height:17px; font-size:12px;}
.m-class2 .itm { width:100px; overflow:hidden;}
}
@-webkit-keyframes showitm {
0% { height:0; opacity:0;}
100% { height:100px; opacity:1;}
}
通常在大括号结束前的值可以省略分号，但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。
选择器集合逗号前面加上一个空格，大括号“{”需要和前面的选择器之间有个空格，每个属性前面都要加上一个空格，冒号前后不能有空格，分好前面不能有空格。
.m-nav li.s-crt a, .m-nav li a:hover { height:40px; background-color:#f60;}
为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
.m-box { margin:0 10px; background-position:50% 0;}
省略url引用中的引号，其他需要引号的地方使用单引号。
.m-box { background:url(bg.png);}
.m-box:after { content:'.';}
除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。
.m-box { color:#f00; background:rgba(0,0,0,0.5);}
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性。
| → | 显示属性 | 自身属性 | 文本属性和其他修饰 |
|---|---|---|---|
| display | width | font | |
| visibility | height | text-align | |
| position | margin | text-decoration | |
| float | padding | vertical-align | |
| clear | border | white-space | |
| list-style | overflow | color | |
| top | min-width | background |
.m-box { position:relative; width:600px; margin:0 auto 10px; text-align:center; color:#000;}
如果属性间存在关联性，则不要隔开写。
/* 这里的height和line-height有关联性 */
.m-box { position:relative; height:20px; line-height:20px; padding:5px; color:#000;}
先写带有浏览器私有标志的，后写W3C标准的。
.m-box { -webkit-box-shadow:0 0 0 #000; -moz-box-shadow:0 0 0 #000; box-shadow:0 0 0 #000;}
对选择器的注释统一写在被注释对象的上一行，对属性及值的注释写于分号后。
注释内容两端需空格，已确保即使在编码错误的情况下也可以正确解析样式。
在必要的情况下，可以使用块状注释，块状注释保持统一的缩进对齐。
原则上每个系列的样式都需要有一个注释，言简意赅的表明名称、用途、注意事项等。
/* 块状注释文字
* 块状注释文字
* 块状注释文字
*/
.m-list { width:500px;}
.m-list li { height:20px; line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}
.m-list li a { color:#333;}
/* 单行注释文字 */
.m-list li em { color:#666;}
很多不兼容问题可以通过改变方法和思路来解决，并非一定需要Hack，根据经验你完全可以绕过某些兼容问题。
一种合理的结构和合理的样式，是极少会碰到兼容问题的。
由于浏览器自身缺陷，我们无法避开的时候，可以允许使用适当的Hack。
统一使用“*”和“_”分别对IE7和6进行Hack。如下代码所示：
/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */
.m-list { color:#000; *color:#888; _color:#fff;}
“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。
当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。
缩写方法请查阅css手册。
行内样式style = 1000
ID选择器的数量 = 100
类、伪类和属性选择器 = 10
类型选择器和伪元素选择器 = 1
| 选择器 | 权重 |
|---|---|
| style=”” | 1000 |
| #wrapper #content {} | 200 |
| #content .dateposted {} | 110 |
| div#content {} | 101 |
| #content p {} | 101 |
| #content {} | 100 |
| p.comment .dateposted {} | 21 |
| div.comment p {} | 12 |
| .comment p {} | 11 |
| p.comment {} | 11 |
| .comment {} | 10 |
| div p {} | 2 |
| p {} | 1 |