通過CSS設計模式搭建自己系統的CSS架構

---

theme: qklhk-chocolate

傳統的CSS書寫風格是隨意命名，堆疊樣式，造成了混亂不堪的結果，複雜頁面的樣式書寫通常會出現幾百行甚至上千行的程式碼，CSS設計模式在實際應用中的橫空出世拯救了樣式混亂，程式碼行數冗餘的局面。例如：BEM設計模式通過BEM的命名規範語義化了類名，ITCSS設計模式解決了CSS設計的分層架構，ACSS原子類的設計思想實現了單一變數單一原子樣式，便於呼叫。

最近在研究關於CSS架構的設計方案，通過學習理解CSS設計模式的設計思想並結合實際專案架構了 ITCSS + BEM + ACSS 的CSS架構專案。逐漸有了一些想法，這裡進行綜合整理，也算是拋磚引玉吧。

專案使用的CSS設計模式簡介

1、ITCSS

• 設定 –預處理程式變數和方法（無實際CSS輸出）
• 工具 – Mixins和函式（無實際CSS輸出）
• 常規 – CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批程式碼
• 元素 –沒有類的單個HTML元素選擇器
• 物件 -通常遵循OOCSS方法的頁面結構類
• 元件 –用於設定任何頁面元素和所有頁面元素樣式的美學類（通常與物件類的結構結合使用）
• Trumps –最重要的樣式，用於覆蓋三角形中的任何其他內容

2、BEM
BEM 是我的方法的基礎。如果你以前從未聽說過 BEM，它代表 block ， element 和 modifier。當你第一次接觸它時，它看起來是那麼的難看。

.block { /* styles */ } 
.block__element { /* styles */ } 
.block--modifier { /* styles */ }

2、ACSS

ACSS使用了緊密的類名庫。 這些類名通常被縮寫，並與它們影響的內容分開。 在ACSS系統中，您可以知道類名的作用； 但是類名稱(至少不是樣式表中使用的名稱)與內容型別之間沒有關係,即每一個樣式對應一個類，也稱原子類CSS。

專案CSS設計模式實現

github（專案地址）

通過ITCSS架構的分層設計思想，對樣式目錄以及功能進行了分層：

通過BEM命名的規範結合SassMagic，書寫樣式程式碼

SassMagic 地址

ACSS實現原子類樣式，便於全域性呼叫/複用

最後

• 本專案結合 ITCSS + BEM + ACSS 實現最終專案CSS架構
• SassMagic 助力BEM命名開發規範
• 通過CSS設計模式開發的專案，樣式程式碼簡介，複用性高，整體結構清晰