如何用SMACSS規(guī)范來編寫CSS

本篇文章為大家展示了如何用SMACSS規(guī)范來編寫CSS，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

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

1. Base 基本屬性

基礎(chǔ)屬性很容易理解，就是最基本的東西，很多樣式簡(jiǎn)單的網(wǎng)站都采用一個(gè)簡(jiǎn)單的二級(jí)CSS文件模式，一個(gè)base.css通用于所有頁面，而每個(gè)頁面有一個(gè)特定的CSS文件，我想這就是Base的雛形。要說具體是什么，比如reset文件，再比如放置clearfix或BFC的一些類似工具集的文件。

其實(shí)最終會(huì)發(fā)現(xiàn)，在Base中的CSS屬性將會(huì)是幾乎全站都要用到的屬性，但我不想這么描述Base，因?yàn)檫@會(huì)誤導(dǎo)人。大多數(shù)情況下，在一個(gè)網(wǎng)站建立之初也只會(huì)有幾個(gè)簡(jiǎn)單的頁面，于是這幾個(gè)頁面都要用到的屬性就變成了通用屬性，但并不是這么簡(jiǎn)單的。隨著網(wǎng)站規(guī)模的擴(kuò)大，需求的增加，設(shè)計(jì)師們靈感的迸發(fā)，所謂的通用和統(tǒng)一也在發(fā)生著潛移默化。所以在編寫B(tài)ase時(shí)，應(yīng)該遵循的基準(zhǔn)是，哪些樣式是你做下一個(gè)網(wǎng)站時(shí)也會(huì)想用的，哪些樣式即使設(shè)計(jì)改變了也只需要改變一些數(shù)值和顏色，哪些樣式是一些基本原則；而不應(yīng)該將目前大部分頁面都在使用的樣式放在Base中，還是那個(gè)道理，它們也許僅僅是恰好相同，而非邏輯一致。

2. Layout 布局

布局是一個(gè)網(wǎng)站的基本，無論是左右還是居中，甚至其他什么布局，要實(shí)現(xiàn)頁面的基本瀏覽功能，布局必不可少。SMACSS將這一功能單獨(dú)提出也是非常正確的，另外還約定了一個(gè)前綴l-/layout-來標(biāo)識(shí)布局的class。舉個(gè)最普遍的例子。

代碼如下:

.l-header {}
   .l-brand {}
   .l-navigator {}
.l-container {}
   .l-sidebar {}
   .l-content {}
.l-footer {}

這就是一個(gè)簡(jiǎn)單的左右布局，導(dǎo)航和Logo中規(guī)中矩在最頂部。

3. Module 模塊

模塊是SMACSS最基本的思想，同時(shí)也是大部分CSS理論的基本，將樣式模塊化就能達(dá)到復(fù)用和可維護(hù)的目的，但是SMACSS提出了更具體的模塊化方案。首先表象上來看，SMACSS中的模塊應(yīng)該擁有一個(gè)名字，并且為其class名，而模塊其他class皆以為前綴。比如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .product {}   

2.     .product-title {}   

3.     .product-image {}   

4.     .product-border {}   

5.     .product-shadow {}  

可以看到例子中product是一個(gè)模塊，title和image是包含在模塊內(nèi)的組件，可用可不用；border和shadow是類似OOCSS的附加class用來改變模塊本身?？傊?，在模塊內(nèi)可以使用其名稱做前綴任意組織模塊結(jié)構(gòu)，但目前是讓其變得更易用，提高可擴(kuò)展性和靈活度，如果僅僅為了某些功能而特意寫一些class就有點(diǎn)有形無實(shí)的感覺了。

4. State 狀態(tài)

狀態(tài)經(jīng)常和JavaScript放在一起使用，它是一種用來標(biāo)識(shí)頁面狀態(tài)的class，無論是為用戶標(biāo)識(shí)還是用程序標(biāo)識(shí)。還是一個(gè)常見的例子，馬上就明白。active經(jīng)常用來表示當(dāng)前的tab，或者當(dāng)前選中的目標(biāo)，這就是一種狀態(tài)，無論是樣式還是程序都需要知道它。

SMACSS仍然有一個(gè)對(duì)應(yīng)的前綴用于標(biāo)示狀態(tài)class，is-是一個(gè)合適的詞，指明某一元素是什么狀態(tài)。

5. Theme 主題

主題就是皮膚，和OOCSS的分離皮膚與結(jié)構(gòu)不謀而合。更重要的是對(duì)于可更換皮膚的站點(diǎn)來說，這樣的分離是非常必要的，只需要更換加載的theme文件即可將皮膚更換。

總的來說，SMACSS是一個(gè)較為注意細(xì)節(jié)與實(shí)現(xiàn)的CSS理論，非常適合初涉CSS的人，它可以讓你的CSS跑在軌道上而不至于脫軌。其思想也與OOCSS有很多相通之處，如果沒有適合的方案，我建議新手可以適當(dāng)?shù)娜谌隣OCSS的思想而使用SMACSS的結(jié)構(gòu)，這樣寫出來的網(wǎng)站樣式至少不會(huì)馬上陷入泥沼。

上述內(nèi)容就是如何用SMACSS規(guī)范來編寫CSS，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。