避免过度约束
作为一般规则，不添加不必要的约束。
CSS Code复制内容到剪贴板 // 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}后代选择符最烂
不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。
CSS Code复制内容到剪贴板 // 烂透了 html div tr td {..}尽可能使用复合语法
CSS Code复制内容到剪贴板 // 糟糕 .someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottombottom; background-repeat: repeat-x; } // 好的 .someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottombottom; }避免不必要的重复
CSS Code复制内容到剪贴板 // 糟糕 .someclass { color: red; background: blue; font-size: 15px; } .otherclass { color: red; background: blue; font-size: 15px; } // 好的 .someclass, .otherclass { color: red; background: blue; font-size: 15px; }组织好的代码格式
代码的易读性和易维护性成正比。下面是我遵循的格式化方法。
CSS Code复制内容到剪贴板 // 糟糕 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的做法 .someclass { background-image: linear-gradient(#000, #ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset; }
