[閱 #40] 幾點關於更好書寫 CSS 選擇器的建議

「閱」——JSCourse 旗下欄目，專門推薦我們為大家精心挑選的優質 JavaScript 相關技術內容

小編最近看到來自 Albert Juhé Lluveras 的一篇文章（請自備梯子）——8 CSS selectors DO』s and DON』Ts - http://t.cn/RR3nT9A，裡面提到了一些書寫 CSS 選擇器的時候的一些建議，小編覺得其中部分建議還是比較中肯的，特別是對於剛剛接觸 CSS 的同學來說，很多時候我們對於選擇器的書寫可能也沒有遵循什麼規範的章法，所以，希望這些建議可以對你有所幫助。

1、在選擇器名中不要直接包含樣式

/* 不推薦 */.blue-text {...}/* 推薦 */.highlighted-text { … }

之所以不推薦上面這種是因為直接名字裡面定義了顏色，萬一以後主題變了，顏色要更改，那修改起來就很麻煩，你得要把所有名字裡面的 blue 都要替換掉。另外，選擇器名應該要闡明目的而非具體的樣式。我們不妨思考下為什麼 bootstrap 中使用了 text-primay, text-secondary, text-success 這樣的名字。

2、選擇器優先順序保持能低則低

/* 不推薦 */.content #intro .icon { … }/* 推薦 */.intro-icon { … }

而且盡量不要用 tag、ID 以及 !important。

3、要和 HTML 結構解耦出來

/* 不推薦 */.header nav li button { … }/* 推薦 */.header-button { … }

上面這種不好的地方就在於依賴 HTML 結構，萬一 HTML 中把 nav 改成了 div，這個選擇器就不生效了。應該盡量使用 classname。

4、盡量和 DOM 結構出現的順序保持一致

/* 不推薦 */.footer { … }.header { … }/* 推薦 */.header { … }.footer { … }

這樣在代碼里找起來也比較好找。

5、對於作用於相同元素的多個選擇器按照優先順序排列

/* 不推薦 */.list-item:first-child { … }.list-item { … }.list-item:last-child { … }/* 推薦 */.list-item { … }.list-item:first-child { … }.list-item:last-child { … }

6、針對同一個頁面/組件的 CSS 選擇器以相同前綴命名

/* 不推薦 */.front-page-title { … }.intro-home { … }.home-text { … }/* 推薦 */.home-title { … }.home-intro { … }.home-text { … }

而且最好對應的 CSS 文件名也叫 home.css，或者如果你用 CSS preprocessor 的話叫 _home.scss、_home.less 等等。這樣一看樣式就知道在哪個文件中找了。

7、對於列表，類名盡量使用複數形式

/* 不推薦 */.shopping-products { … }.shopping-products-item { … }/* 推薦 */.shopping-products { … }.shopping-product { … }

8、重複聲明屬性好過重複選擇器名

/* 不推薦 */.map,.map-svg { max-width: 100%;}.map { background-color: #ddd;}/* 推薦 */.map { background-color: #ddd; max-width: 100%;}.map-svg { max-width: 100%;}

下面這種可讀性會更好一點。

另外大家有興趣也可以去深入閱讀下 BEM 原則 - http://getbem.com/，可以進一步學習到面對比較複雜的應用，如何通過合理的命名來編寫出更好的 CSS 代碼。

好了，本期就到這裡了，我們下期再見咯！

關注「jscourse」微信公眾號可以獲取更多關於 JavaScript 的學習課程和資料。