前言
也許你曾經看到過很多樣式命名規則，也參考了我們制定的命名規范，但是大部分的具體樣式還是不知道如何命名，主要思想或者標準是什么，也就是前面.m-panel-后面的應該如何命名，子模塊與父模塊依賴關系怎么體現，等等類似的問題。如何友好科學的解決問題，能夠與最大程度的降低我們后期對樣式的維護難度。
本文將帶你了解目前前端基本的命名規則，各自的優劣，然后我們會給出具體的方案。
一 指定的格式
駝峰式命名
類似于.mLayerTitle這樣形式的，但這個僅僅是格式，不代表命名規則，和應該如何去思考用什么名稱。
以-格式分割開
類似于.m-layer-title ,這種格式也是很常見的。同樣也是只有格式，沒有命名方式的核心思想的。
二 樣式組織思想
BEM（block+element+modify）
塊級，元素，修改，它的主要設計思路是需要定義塊級，對于子元素分別利用_區分，對于修飾的部分增加--實現。對于比較復雜的塊級元素用-實現連接。舉證如下：
site-nav site-nav_logo site-nav_login site-nav--active site-nav--active
OOcss
- OOCSS是object-oriented CSS的縮寫. 主要有兩個意思:
- 結構和設計分離
- 容器和內容分離
- 使用這種結構, 開發人員獲得可以在不同地方使用的CSS類.
- 通常這時候總是會有兩個消息(一個好消息和一個不好的消息):
- 好消息: 通過復用來減少代碼量(DRY原則)
- 不好的消息: 維護非常困難(復雜). 當你修改某一個具體的元素的樣式的時候, 大部分情況下, 除了修改CSS本身(因為多數的CSS類是通用的), 你還不得不添加更多的標記類(markup).
- 另外, OOCSS本身并不提供具體的規則, 而是抽象的建議, 所以這種方法在生產中的最終結果會有所不同.
- 事實上, OOCSS的想法啟發了其他人創建自己的, 更具體的代碼結構化方式.
- 具體的延伸就是我們將全局樣式，布局、間距、模塊樣式區分開來，并輔以科學準確約定的方式。
SmacSS 可擴展和模塊化結構的 CSS
SMACSS是可擴展和模塊化結構CSS的簡稱. 該方法的主要目標是減少代碼量并簡化代碼維護.
Jonathan Snook把它歸納為5個部分:
- 基本規則(Base rules): 為網址的主要元素設置樣式, 如body, input, button, ul, ol等. 在這一步中, 我們主要使用html標簽和屬性選擇器, 在特殊情況下, 使用CSS類(如: 如果您有JAVAScript-Style選擇);
- 布局規則(Layout rules): 主要是些全局元素, 頂部, 頁腳, 邊欄等模塊的大小. Jonathan建議使用ID選擇器, 因為這些模塊不太可能在同一個頁面上出現多次. 然而, 本文作者認為這是個很不好的習慣(每當ID出現在樣式文中, 感覺世界頓時變得灰暗, 有一股莫名的哀傷).
- 模塊規則(Modules rules): 模塊(類似于卡片布局)可以在一個頁面中使用多次. 對于模塊CSS類, 不建議使用ID和tag選擇器(這是為了方便重用以及上下文獨立).
- 狀態規則(State rules): 在這一步中, 規定了模塊的各種狀態以及網站的基礎部分. 這是唯一允許使用"!important"的地方.
- 主題規則(Theme rules): 設計您可能需要更換的樣式.
- 我們推薦為屬于某個組的CSS類定義命名空間, 并為JavaScript中使用的CSS類使用單獨的命名空間.
Atomic CSS 原子 CSS
- Atomic CSS是CSS架構的一種方法, 它的好處是寫出基于視覺功能的小的, 單用途CSS類.這種類通常也被稱為原子類。
- 使用Atomic CSS, 為每個可重用的屬性創建單獨的CSS類. 例如, margin-top: 1px; 就可以創建一個類似于mt-1的CSS類, 或者width: 200px; 對應的CSS類為w-200.這樣設計可以最大程度的統一頁面的共用樣式，便于管理，尤其在你采用了預處理器之后，可以使用繼承，拓展等方式快速使用某常用代碼段或者樣式模塊，最大程度的減少css代碼數量。
- 存在的缺點:
- CSS類名是屬性名稱的描述, 而不是元素的自然語義. 這種想象很容易使人在開發過程中變得迷茫. 開發本身也十分容易復雜化.
- 直接在HTML中進行顯示設置.
- 由于這些短板的存在, 這種做法遭到了大量的批評. 然而, 這種做法對于大型項目來說是有一定效果的.
- 此外, Atomic CSS在各種框架中被用于校正元素樣式以及某些層(layers)的其他方法.
MCSS 多層 CSS
- MCSS指的是多層CSS(Multilayer CSS). 這種樣式寫法建議將樣式分成多個部分, 每個部分稱為層(layers).
- 第0層或基礎(Zero layer or foundation), 負責重置瀏覽器樣式的代碼(如: reset.css或者normalize.css);
- 基層(Base layer), 包括可重用元素的樣式: buttons, input, hints等等.
- 項目層(Project layer), 包括單獨的模塊和"上下文" - 根據用戶端瀏覽器或用于瀏覽的設備, 用戶權限等對元素的樣式進行調整.
- 裝飾層(Cosmetic layer), 使用OOCSS風格來書寫樣式, 對元素外觀做微小的調整. 建議僅留下影響外觀的風格, 而不能破壞網站的布局(例如顏色和非關鍵縮進等).
- 層與層之間的交互層次是非常重要的:
- 在基層(Base layer)中定義中性的樣式, 并且不影響其它層.
- 基層(Base layer)中的元素只能影響基層的CSS類.
- 項目層(Project layer)中的元素可以影響基層和項目層.
- 裝飾層(Cosmetic layer)是以描述性OOCSS類("atomic"類)的形式進行設計, 不會影響其他CSS代碼, 而是在標記中有選擇的使用.
AMCSS 屬性模塊 CSS
AMCSS是"屬性模塊CSS"的縮寫.
先讓我們來看一個例子:
<div class="button button--large button--blue">Button</div>
如果這樣寫CSS類的鏈, 是有點復雜的, 所以讓我們通過屬性來為這些CSS類分組. 分組后就變成下面這樣了:
<div button="large blue">Button</div>
為了避免屬性名稱沖突, 好的方式是為屬性加上命名空間. 然后, 我們的button代碼就變成這樣了:
<div am-button="large blue">Button</div>
如果您使用了驗證器去檢查你的代碼, 并且它(驗證器)不喜歡類似于am-button這樣的屬性名稱, 你可以把屬性的命名空間(am-)換成data-. 例如: data-button.
使用一個不是那么常用的選擇器"~="(IE7以上都支持), 它類似于CSS類屬性: 所有屬性值包含指定的單詞(以空格分開)的元素都會被選中. 所以, 選擇器[class ~= "link"][class~= "button"]相對于選擇器a.link.button. 這種選擇器(選擇方式)同樣適用于屬性.
因此, CSS代碼就可以這樣寫:
/* CSS類選擇器 */
.button { ... }
.button--large { ... }
.button--blue { ... }
/* CSS屬性選擇器 */
[am-button] { ... }
[am-button ~= "large"] { ... }
[am-button ~= "blue"] { ... }
如果您認為這段代碼十分的不尋常, 可以嘗試使用較為溫和的AMCSS 形式:
<div am-button am-button-large am-button-blue>Button</div>
FUN
FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."
每個名稱前面的字母都代表著一定的原則:
F, 選擇器的扁平的層次結構: 建議使用CSS類選擇元素(items), 避免不必要的級聯, 杜絕使用id.
U, 實用(功能)樣式: 鼓勵創建原子(atomic)樣式來解決典型的修正(微調)任務, 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名稱分割組件: Ben建議添加命名空間來指定特定模塊元素的樣式. 這種方法將避免類的中重疊.
一些開發人員注意到, 使用這種原則來編寫CSS代碼是非常方便和容易維護的; 在某種程度上, 作者汲取了SMACSS的精華, 以簡單并且簡潔的方式闡述了這一技術.
這種方式對項目和代碼結構施加了很多的要求, 它僅僅建立了記錄選擇器的首選形式以及它們在標記中的使用方式. 但在小型項目中, 這些規則足以幫助構建高質量的CSS代碼.
結論
這些樣式的的設計思想中沒有完全符合實際需求的，項目實踐中建議根據自己的業務以及成員需求，選擇合適的樣式明明規則，可以是上面一種，也可以是其中幾種混合的結果，最終目的都是讓你的樣式便于維護而已。
這里，個人建議的是用SMAC+Atomic，并且綜合歸結到了基本的css代碼規范中。
