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

孫凱亮發表於2021-06-04

theme: qklhk-chocolate

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

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

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

1、ITCSS

image.png

  • 設定 –預處理程式變數和方法(無實際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架構的分層設計思想,對樣式目錄以及功能進行了分層:
image.png

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

image.png

SassMagic 地址

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

image.png

image.png

image.png

最後

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

相關文章