CSS编写规范的相关建议_Div+Css教程--HTML5中文学习网

　　避免过度约束

　　作为一般规则，不添加不必要的约束。

　　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;

　　}