css模塊化思想（一）--------命名是個技術活

　　引子：

　　女孩子都喜歡買衣服，而我也不例外，奈何錢包太瘦，買不起高大上的定製，只能買撞衫率極高的休閒衣，不過對於我來講，我仍是開心的，畢竟買衣服買的不只是衣服，更是一種心情。在web前端的世界裏，css裏也充滿了生活的藝術，都說，藝術源於生活，卻高於生活，是對生活的一種昇華，那麼在css裏，是個性化的定製好，仍是模塊化的量產好呢？這就要看各個項目了，這是一種權衡，一切離不開一個度，這世上沒有最好的，只有最適合本身的，在web前端的世界裏亦是如此。

　　假如你如今只是作本身的一個小博客，那麼就須要你有本身的個性，由於博客至關於你我的的代言，那麼不少都是個性化的，並且須要你獨自一人慢慢打造出適合本身的風格。不過，大多數的時候是在工做中，對於工做中，就要考慮兩個字--合做，面對一個須要你們合做才能儘快完成的項目，這就須要模塊化的思想了，你們須要一個共同的標準，有一個共享庫，不在是個性化的代碼，而是便於團隊成員閱讀和維護的優雅代碼。因爲css模塊化涉及方方面面，因此，我就一點點揭開它的神祕面紗吧！這一篇就先聊聊命名好了。

　　正篇：

什麼是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

標籤頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標題：title

加入：joinus

指南：guide

服務：service

註冊：register

狀態：status

投票：vote

合做夥伴：partner

(二)註釋的寫法:

/* Header */ 內容區 /* End Header */ 

(三)id的命名:

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制總體佈局寬度：wrapper

左右中：left right center

(2)導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

(3)功能

標誌：logo

廣告：banner

登錄：login

登陸條：loginbar

註冊：register

搜索：search

功能區：shop（如購物車）

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標籤頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

註釋：note

指南：guide

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合做夥伴：partner

友情連接：link

版權：copyright

(四)class的命名:

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } 

（2）字體大小,直接使用」font+字體大小」做爲名稱,如

.font10px { font-size: 10px; } .font6pt {font-size: 6pt; } 

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; } .bottom { float:bottom; } 

(4)標題欄樣式,使用」類別+功能」的方式命名,如

.barnews { } .barproduct { } 

注意事項::

1. 一概小寫;
2. 儘可能用英文;
3. 不加中槓和下劃線;
4. 儘可能不縮寫；

我比較喜歡bootstrap的簡潔優雅的風格。因此css命名也能夠參考一下。

 

特別是class命名：

 

• class 名稱中只能出現小寫字符和連字符（不是下劃線，也不是駝峯命名法）。連字符應當用於相關 class 的命名（相似於命名空間）（例如，.btn 和 .btn-danger）。
• 避免過分任意的簡寫。.btn 表明 button，可是 .s 不能表達任何意思。
• class 名稱應當儘量短，而且意義明確。
• 使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。
• 基於最近的父 class 或基本（base） class 做爲新 class 的前綴。
• 使用 .js-* class 來標識行爲（與樣式相對），而且不要將這些 class 包含到 CSS 文件中。

 

選擇器

• 對於通用元素使用 class ，這樣利於渲染性能的優化。
• 對於常常出現的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
• 選擇器要儘量短，而且儘可能限制組成選擇器的元素個數，建議不要超過 3 。
• 只有在必要的時候纔將 class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴相似於命名空間）。

 

css編碼規範能夠參考http://codeguide.bootcss.com/

 

很是高興能跟你們一塊兒分享，一塊兒學習，今天就寫到這裏了，由於本人水平有限，有錯誤的地方，歡迎指正，謝謝啦！---妙瞳。