CSS編寫規范的相關建議

 　　避免過度約束

　　作為一般規則，不添加不必要的約束。

　　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;

　　}