編寫更好的CSS

標籤：style   http   color   使用   os   io   html   ar   

編寫好的CSS代碼能提升頁面的渲染速度。本質上，一條規則都沒有引擎解析的最快。MDN上將CSS選擇符歸拆分成四個主要類別，如下所示，效能依次降低。

• ID 規則

• Class 規則

• 標籤規則

• 通用規則

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

1. // 糟糕ul#someid {..}.menu#otherid{..}// 好的#someid {..}#otherid {..}

後代選擇符最爛
不僅效能低下而且代碼很脆弱，html代碼和css代碼嚴重耦合，html代碼結構發生變化時，CSS也得修改，這是多麼糟糕，特別是在大公司裡，寫html和css的往往不是同一個人。

1. // 爛透了html div tr td {..}

避免鏈式（交集）選擇符
這和過度約束的情況類似，更明智的做法是簡單的建立一個新的CSS類選擇符。

1. // 糟糕.menu.left.icon {..}// 好的.menu-left-icon {..}

堅持KISS原則
想象我們有如下的DOM：

1. <ul id="navigator">    <li><a href="#" class="twitter">Twitter</a></li>    <li><a href="#" class="facebook">Facebook</a></li>    <li><a href="#" class="dribble">Dribbble</a></li></ul>

下面是對應的規則……

1. // 糟糕#navigator li a {..}// 好的#navigator {..}[b]使用複合文法[/b]儘可能使用複合文法。

2. [code]// 糟糕.someclass {    padding-top: 20px;    padding-bottom: 20px;    padding-left: 10px;    padding-right: 10px;    background: #000;    background-image: url(../imgs/carrot.png);    background-position: bottom;    background-repeat: repeat-x;}// 好的.someclass {    padding: 20px 10px 20px 10px;    background: #000 url(../imgs/carrot.png) repeat-x bottom;}

避免不必要的命名空間

1. // 糟糕.someclass table tr.otherclass td.somerule {..}//好的.someclass .otherclass td.somerule {..}

避免不必要的重複
儘可能組合重複的規則。

// 糟糕.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;}

儘可能精簡規則
在上面規則的基礎上，你可以進一步合并不同類裡的重複的規則。

// 糟糕.someclass {    color: red;    background: blue;    height: 150px;    width: 150px;    font-size: 16px;}.otherclass {    color: red;    background: blue;    height: 150px;    width: 150px;    font-size: 8px;}// 好的.someclass, .otherclass {    color: red;    background: blue;    height: 150px;    width: 150px;}.someclass {    font-size: 16px;}.otherclass {    font-size: 8px;}

避免不明確的命名規範
最好使用表示語義的名字。一個好的CSS類名應描述它是什麼而不是它像什麼。

避免 !importants
其實你應該也可以使用其他優質的選取器。





遵循一個標準的聲明順序
雖然有一些排列CSS屬性順序常見的方式，下面是我遵循的一種流行方式。

1. .someclass {/* Positioning *//* Display & Box Model *//* Background and typography styles *//* Transitions *//* Other */}




組織好的代碼格式
代碼的易讀性和易維護性成正比。下面是我遵循的格式化方法。

1. // 糟糕.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;}