規範命名css

css3已經發布了，許多WEB前端工程師都開始嘗試使用該技術了。我們怎麼來評價寫css的能力呢?不會用對錯來判斷，我們可能會用「好」、「一般」、「很爛」等字眼來形容。 CSS最難的是什麼呢?是各大瀏覽器的兼容?是代碼的簡潔高效性?前端工程師五指曾說過：css不是什麼難的技術，難點在於怎樣規範的命名。專案由個人完成，工程師可以依據自己的習慣來命名css。在團隊合作中，不規範的命名側可能會引發衝突，進而影響整個專案的進度。下面嶺南網路手把手教大家如何規範的命名css。
 
　　劃分css可以有多種角度，如按功能劃分：將字體的css存放在font.css;將控制顏色的css存放在color.css;將控制佈局的css存放在layout.css;或按區區塊分割：將頭部的css存放在header.css;將底部的css存放在footer.css;將側邊欄​​存放在sidebar.css;將主題存放在main.css。不同的角度有劃分都有自己的利與弊。
 
　　嶺南網路推薦給大家一種css的分割方法：base.css+common.css+page.css。將一個網站所有的樣式，依職能分成三大類：base、common、page，在任何一個網頁最終樣式表現都由這三者完成的。
 
　　base層是網站頁面樣式所需依賴的最底層，相對穩定基本不用維護。我們一般會在base.css存放以下內容。
 
　　/*css reset 因為每個瀏覽器都會對一些標籤屬性有預設預設值，所以要將一些標籤屬性統一設定*/
 
body,div,dl,dt,dd,dl,ol,ul ,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;}
table{border-collapse: collapse;border-spacing:0;}
ol ul{list-style:none;}
 
/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;
.f14{font-size:14px;}
 
/*定位*/
.tl{text-algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right; }
 
/*長高度*/
.w10{width:10px;}
.h10{height:10px;}
 
/*邊距*/
.m10{margin:10pxml}
. left:10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}
　　common層是位於中間層，提供組件級的CSS。我們可以將頁面內的元素拆分為一小塊一小塊的功能和样式相對獨立的“模板”，這些模板有些是很少重複的，有些會是大量重複的，我們可以將大量重複的樣式提取出來存放在common.css樣式中。如網站要用到很多重複的標題，我們就可以這樣來寫：
 
　　.h2{font-size:14px;font-weight:bold;}
 
　　page層是頁級的，建議將所有page層的css都存放在page.css裡，可依頁面配上註釋，分塊書寫，方便維護。如：
 
/*關於我們*/
.about-text{font-size:12px;}
 
/*聯絡資訊*/
.contact-text{font-size:14px;}
　　　　公層層基本上是不用維護的，common層修改的幅度不會很大，page層程式碼可能有多個工程師開共同開發，那要如何避免衝突呢?我們可以透過命名來避免衝突。可以將css命名規範為：駱駝命名法和劃線命名法。駱駝命名法：從第二個字開始，將每個字的首字母大寫。如dropMenu、subNavMenu.劃線命名法：以中劃線-，或底線_分隔，如drop-menu、sub_nav_menu。
 
　　如果專案是由多個工程師來完成的，我們可以為每個人分配一個獨立的命名ID。如嶺南網叫linknan，我們可以把名字開頭的2個字母分配為獨立命名id，如：.ln-artice li。這樣就可以避免重複命名而產生衝突。