6種組織CSS的方法

前言

7月最後一天了。今日早讀文章由@池盛星翻譯投稿分享。

正文從這開始～

Ben Frain曾經說過, 寫CSS容易, 擴展和維護難. 這篇文章介紹了一些解決方案的集合, 試圖解決這個問題 .

OOCSS 面向對象 CSS

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"的縮寫.

先讓我們來看一個例子:

Button

如果這樣寫CSS類的鏈, 是有點複雜的, 所以讓我們通過屬性來為這些CSS類分組. 分組後就變成下面這樣了:

Button

為了避免屬性名稱衝突, 好的方式是為屬性加上命名空間. 然後, 我們的button代碼就變成這樣了:

Button

如果您使用了驗證器去檢查你的代碼, 並且它(驗證器)不喜歡類似於am-button這樣的屬性名稱, 你可以把屬性的命名空間(am-)換成data-. 例如: data-button.

因此, CSS代碼就可以這樣寫:

/* CSS類選擇器 */

.button{...}

.button--large{...}

.button--blue{...}

/* CSS屬性選擇器 */

[am-button]{...}

[am-button~="large"]{...}

[am-button~="blue"]{...}

如果您認為這段代碼十分的不尋常, 可以嘗試使用較為溫和的AMCSS 形式:

Button

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代碼.

結論

正如你所看到的, 這些方法中沒有哪一個是非常理想的. 因此, 並沒有對所有人所有項目都適合的絕對的標準 - 你可以從這些方法中選擇某一個開始, 創建某些屬於你自己的東西. 亦或者完全重頭開始建立一套你自己的標準 .

關於本文

譯者：@池盛星

作者：@ Inessa Brown

原文：https://css-tricks.com/methods-organize-css/

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！