通過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設計模式開發的項目，樣式程式碼簡介，復用性高，整體結構清晰
