什麽是css模塊化思想？(what)

為了理解css模塊化思想，我們首先了解下，什麽是模塊化，在百度百科上的解釋是，在系統的結構中，模塊是可組合、分解和更換的單元。模塊化是一種處理復雜系統分解成為更好的可管理模塊的方式。它可以通過在不同組件設定不同的功能，把一個問題分解成多個小的獨立、互相作用的組件，來處理復雜、大型的軟件。看完模塊化，是不是有種拼圖的即視感，可以把大圖分成各個小圖，然後把小圖拼成大圖，分與合的藝術感。那麽css模塊化思想，也就是在css編寫環境中，用上模塊化的思想，把一個大的項目，分解成獨立的組件，不同的組件負責不同的功能，最後把模塊組裝，就成了我們要完成的項目了。

為什麽需要css模塊化?(why)

當做一個大項目，幾個人團隊合作開發，結果看不懂彼此的代碼，怎麽辦，當面對前人已經寫好代碼，需要修改，可是無處下手，怎麽辦.當代碼耦合，修改費時費力，怎麽辦，當需要叠代，面對龐大的代碼，牽一發動全身的悲催時刻，怎麽辦，這個時候，模塊化思想就是救星了。css寫法特別的靈活，也因為靈活，所以容易耦合在一起，這時候就需要進行模塊化的分離。那麽css模塊化的好處多多，列舉了一些如下：

　　　　提高代碼重用率

　　　　提高開發效率、減少溝通成本

　　　　提高頁面容錯

　　　　降低耦合

　　　　降低發布風險

　　　　減少Bug定位時間和Fix成本

　　　　更好的實現快速叠代

　　　　便於代碼維護

　　　　。。。。。。

怎樣實現css模塊化？（how）

　　　　要實現css模塊化需要很多步，今天我們就說說第一步，命名。

　　　　看別人的代碼，就好像進入對方的軍事基地一樣，要想裏面的武器用的得心應手，首先得知道每個武器的名字，假如你的武器都是取的不三不四，那麽就算來到了基地，估計也不敢動你的武器了，更別提戰鬥了，所以，要規範我們在css中的命名，盡量做到團隊成員能一看就懂。

　　　　css命名上的優化可以分為css文件名的命名，以及css選擇器的命名。

css樣式文件名：

1）　

主要的 master.css
布局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css

2）

reset.css // 對瀏覽器的默認樣式進行重設
layout.css // 管理頁面的布局
typeset.css // 圖文的編排
color.css // 統一管理顏色的搭配
print.css // 打印效果樣式
ie.css // 把對ie的hack單獨分開

3）

reset.css
header.css // 頭部的所有樣式
container.css // 除頭部/底部外的中間區域樣式
footer.css // 底部樣式
print.css
ie.css

4)

reset.css /*頁面樣式充值*/
header.css /*全站頭部樣式*/
footer.css /*全站尾部樣式*/
public.css /*全站公共模塊樣式*/
index.css /*首頁特有樣式*/
container.css /*二級及以下主體樣式*/
print.css /*打印樣式*/
ie.css /*IE hack*/

等等

還是那句話，沒有最好的命名方式，只有最合適的命名方式。主要就是從html結構和bug的快速定位和便於其他成員的修改上去考慮。

假如你的網站是新聞類的門戶網站，然後html的結構就主要是布局，版面 layout.css ，專欄 columns.css ，文字 font.css ，打印樣式 print.css 就比較適合，因為跟html很一致，也很契合。

假如是企業官網的話，一般html結構都是頭和尾都有標準的，所以與html結構最契合的就是第三種了，同時我們可以優化第三種，在container裏面再分類，分成common,layout，就方便進一步的修改，至於common裏就可以放入font,color一些公用的樣式。

沒有完美的生活，也沒有完美的人，所以也沒有完美的文件命名，只有盡量做到與html布局契合，然後重在從每次的項目中反省，總結，條條大路通羅馬，能抓住老鼠的就是好貓。

css選擇器的命名：

規範css選擇器的命名，是個老生常談的問題，對它的規範，不僅是模塊化實現的一環，便於團隊開發，同時也規避了一些兼容性的麻煩。因為各個瀏覽器，IE，火狐，谷歌，safari

，每個瀏覽器,IE產品，火狐，safari,coogle Chrome，都會因為命名不規範會產生不同樣式..

所有的CSS語法是不區分大小寫的ASCII範圍（即，i.e., [a-z] and [A-Z]是等價的）中，除了部分不屬於CSS的控制之下。例如，在HTML中值的區分大小寫屬性“ID”的字體名稱和“class”，和URI就在於本規範的範圍之內。請特別註意，元素名稱是不區分大小寫的HTML，但區分大小寫的XML。
在CSS中，標識符（包括元素名稱，類別，並在選擇的ID）只能包含字符[A-ZA-Z0-9]和ISO 10646字符U + 00A0高，加上連字符（ - ）和下劃線（ _）;他們不能以數字開頭，兩個連字符，或一個連字符後跟數字。標識符也可以包含轉義字符和任何ISO 10646字符作為一個數字代碼（見下項）。例如，識別符“B&W?”可被寫為“B \＆W \？”或“B \ 26Wˉˉ\ 3F”。請參考W3C CSS2.1的4.1.3節,鏈接地址：http://www.w3.org/TR/CSS21/syndata.html#characters

通過如下代碼：

在各瀏覽器的結果如下：

ie6:

ie7

ie8

Firefox38.0.1

360結果，Google Chrome，safari,opera結果一致如下：

從上面直觀的了解到選擇器的命名在各瀏覽器下的支持情況有所不同。因此，如果選擇器的命名不規範，將影響各瀏覽器下的渲染效果。為了兼容以上的瀏覽器，省麻煩，我們盡量命名以字母開頭。可以保證都兼容。

常用的css命名規則

頭：header

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁腳：footer

版權：copyright

滾動：scroll

內容：content