如何寫好 CSS

##1.CSS 的 class 命名原則

建議組合使用 camel 規則和中劃線分隔方式，不推薦使用下劃線，因為不便於輸入

camel 規則用於區別不同單詞，中劃線用於表明從屬關係，例如：

<ul class="xxList">
  <li></li>
  <li></li>
  <li class="xxList-lastItem"></li>
</ul>

中劃線就像命名空間，用來限定作用域，從這個角度來看，或許可以稱為模塊化 CSS、面向對象的 CSS

##2.低優先級原則

避免濫用子選擇器、後代選擇器，會提高優先級，而且存在衝突隱患。為了保證樣式容易被覆蓋，要保證選擇符優先級盡可能低

面對樣式變更時，過高的優先級讓人很苦惱，比如：

.info .infoBody .lastItem span {
    color: red;
}

此時如果想要把 lastItem 的某個 span 孩子改為綠色就很費勁了，為了不影響目標 span 的 span 兄弟，只能給目標 span 掛上一個樣式，並且添上這一串選擇符：

.info .infoBody .lastItem span.special {
    color: green;
}

否則會因為優先級不夠而被 red 覆蓋掉，這種情況下似乎沒有辦法阻止後代選擇符變得更長

如果採用命名空間的方式就會好很多，例如：

.info-infoBody-lastItem span {
    color: red;
}

.info-infoBody-lastItem special {
    color: green;
}

讓選擇器保持低優先級更易於修改，所以 CSS Lint 甚至不建議使用 id 選擇器，當然 id 選擇器不支持擴展（id 是唯一的）也是一個重要因素

##3.避免 class 命名衝突

多人合作中，為了最大限度地避免衝突，可以給樣式添上前綴，例如：

<!-- by zhangsan -->
<ul class="zs-xxList">
    <li></li>
    <li></li>
    <li class="zs-xxList-lastItem"></li>
</ul>

<!-- by lisi -->
<ul class="ls-xxList">
    <li></li>
    <li></li>
    <li class="ls-xxList-lastItem"></li>
</ul>

##4.可讀性與過長的命名

過長的命名，比如"zs-dropMenu-lastItem-img"，勢必會增加文件大小，但這樣命名帶來的可讀性方面的好處要比增加文本文件大小划算得多，何況文本文件可以 gzip 壓縮

##5.多用組合

CSS 里也存在這樣的問題：應該掛上多個 class 還��掛上一個新的 class？

面向對象的設計原則中有一條是：多用組合少用繼承。在這裡同樣適用，雖然繼承無從說起。組合的優勢在於更靈活，更易擴展，例如：

.fl {
    float: left;
}
.fr {
    float: right;
}
.bdRed {
    border: 1px solid red;
}

一般情況，用這樣的原子 class 來組合實現樣式更容易擴展（可以添加 bdGreen, w950 等等），base 層和 common 層就是這樣組織的，page 層內部也可以這樣組織，帶來的好處是樣式發生變更時候只需要更新 class 的值，而不是去修改某一條樣式規則，當然，有些時候也必須先新增 class 再應用，而採用只掛一個 class 的話，每次都不得不先從樣式文件中找到某個 class 再修改某條規則

（bdRed 這樣的命名可能會被人反對，因為希望 class 名能夠表達額外語義，而不是單純表明樣式，樣式發生變更時，bdRed 可能實際上表示黑色實線邊框，這時候想要保持語義就要把 bdRed 改為 bdBlack 並同時修改 html。採用組合則不存在這樣的問題，因為我們會新增 bdBlack，而不是修改 bdRed）

注意：和 OOP 一樣，可擴展性需要根據具體場景取捨，在不太可能發生變動的部分採用組合除了增加 CSS 代碼長度外沒有任何好處

##6.hook

這是最為重要的一點，可以把 class 或 id 作為 hook，hook 就是一個懸空（不對應任何樣式，也不出現在選擇符中）的鉤子，以後可以往上面掛東西。hook 分為 css hook 和 js hook，都非常好用。

css hook 是用來預防變更的，給一個可能發生變更的元素先添上 class，不需要應用任何樣式，將來變更發生時再填充樣式規則即可。其實這也說明了另一個問題：不要省略應有的標籤。更少的標籤意味著更難擴展，例如：

<h2>二級標題<span class="btn">展開/收起</span></h2>

如果樣式變更要求二級標題有下劃線，我們就不得不添上把「二級標題」用一個 inline 標籤包裹起來，再添加樣式，而豎直居中等等也可能會受到影響。如果一開始就把「二級標題」用標籤包裹起來就不會手忙腳亂了。當然，也沒有必要添上一堆 css hook，因為有的地方確實不太可能發生樣式變更，所以在浪費和節省之間存在有一個度

js hook 是為 js 提供的線索，便於操作樣式，一般把 id 作為 js hook，因為原生的getElementById是效率最高的，即便不能直接找到元素，也可以用來縮小檢索範圍。同樣地，把 class 作為 js hook 也能提高元素檢索效率，避免低效地從右向左掃描後代選擇符檢索元素

###參考資料

《編寫高質量代碼-Web 前端開發修煉之道》

評論

提交評論