萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 用SMACSS規范來編寫CSS

用SMACSS規范來編寫CSS

   這是一個相對繁雜的CSS理論,分為Base、Layout、Module、Status和Theme共五個部分。不過它的核心思想仍然和OOCSS類似,鼓勵使用class。

  1. Base 基本屬性

  基礎屬性很容易理解,就是最基本的東西,很多樣式簡單的網站都采用一個簡單的二級CSS文件模式,一個base.css通用於所有頁面,而每個頁面有一個特定的CSS文件,我想這就是Base的雛形。要說具體是什麼,比如reset文件,再比如放置clearfix或BFC的一些類似工具集的文件。

  其實最終會發現,在Base中的CSS屬性將會是幾乎全站都要用到的屬性,但我不想這麼描述Base,因為這會誤導人。大多數情況下,在一個網站建立之初也只會有幾個簡單的頁面,於是這幾個頁面都要用到的屬性就變成了通用屬性,但並不是這麼簡單的。隨著網站規模的擴大,需求的增加,設計師們靈感的迸發,所謂的通用和統一也在發生著潛移默化。所以在編寫Base時,應該遵循的基准是,哪些樣式是你做下一個網站時也會想用的,哪些樣式即使設計改變了也只需要改變一些數值和顏色,哪些樣式是一些基本原則;而不應該將目前大部分頁面都在使用的樣式放在Base中,還是那個道理,它們也許僅僅是恰好相同,而非邏輯一致。

  2. Layout 布局

  布局是一個網站的基本,無論是左右還是居中,甚至其他什麼布局,要實現頁面的基本浏覽功能,布局必不可少。SMACSS將這一功能單獨提出也是非常正確的,另外還約定了一個前綴l-/layout-來標識布局的class。舉個最普遍的例子。

  代碼如下:

  .l-header {}

  .l-brand {}

  .l-navigator {}

  .l-container {}

  .l-sidebar {}

  .l-content {}

  .l-footer {}

  這就是一個簡單的左右布局,導航和Logo中規中矩在最頂部。

  3. Module 模塊

  模塊是SMACSS最基本的思想,同時也是大部分CSS理論的基本,將樣式模塊化就能達到復用和可維護的目的,但是SMACSS提出了更具體的模塊化方案。首先表象上來看,SMACSS中的模塊應該擁有一個名字,並且為其class名,而模塊其他class皆以為前綴。比如:

  CSS Code復制內容到剪貼板

  .product {}

  .product-title {}

  .product-image {}

  .product-border {}

  .product-shadow {}

  可以看到例子中product是一個模塊,title和image是包含在模塊內的組件,可用可不用;border和shadow是類似OOCSS的附加class用來改變模塊本身。總之,在模塊內可以使用其名稱做前綴任意組織模塊結構,但目前是讓其變得更易用,提高可擴展性和靈活度,如果僅僅為了某些功能而特意寫一些class就有點有形無實的感覺了。

  4. State 狀態

  狀態經常和JavaScript放在一起使用,它是一種用來標識頁面狀態的class,無論是為用戶標識還是用程序標識。還是一個常見的例子,馬上就明白。active經常用來表示當前的tab,或者當前選中的目標,這就是一種狀態,無論是樣式還是程序都需要知道它。

  SMACSS仍然有一個對應的前綴用於標示狀態class,is-是一個合適的詞,指明某一元素是什麼狀態。

  5. Theme 主題

  主題就是皮膚,和OOCSS的分離皮膚與結構不謀而合。更重要的是對於可更換皮膚的站點來說,這樣的分離是非常必要的,只需要更換加載的theme文件即可將皮膚更換。

  總的來說,SMACSS是一個較為注意細節與實現的CSS理論,非常適合初涉CSS的人,它可以讓你的CSS跑在軌道上而不至於脫軌。其思想也與OOCSS有很多相通之處,如果沒有適合的方案,我建議新手可以適當的融入OOCSS的思想而使用SMACSS的結構,這樣寫出來的網站樣式至少不會馬上陷入泥沼。

copyright © 萬盛學電腦網 all rights reserved