css3已經(jīng)發(fā)布了，許多WEB前端工程師都開(kāi)始嘗試使用該技術(shù)了。我們?cè)鯓觼?lái)評(píng)價(jià)編寫(xiě)css的能力呢?不會(huì)用對(duì)與錯(cuò)來(lái)判斷，我們可能會(huì)用“好”、“一般”、“很爛”等字眼來(lái)形容。CSS最難的是什么呢?是各大瀏覽器的兼容?是代碼的簡(jiǎn)潔高效性?前端工程師五指曾說(shuō)過(guò)：css不是什么難的技術(shù)，難點(diǎn)在于怎樣規(guī)范的命名。項(xiàng)目由個(gè)人完成，工程師可以依據(jù)自己的習(xí)慣來(lái)命名css。在團(tuán)隊(duì)合作中，不規(guī)范的命名側(cè)可能會(huì)引發(fā)起沖突，從而影響到整個(gè)項(xiàng)目的進(jìn)度。下面嶺南網(wǎng)絡(luò)手把手教大家如何規(guī)范的命名css。
劃分css可以有多種角度，如按功能劃分：將字體的css存放在font.css;將控制顏色的css存放在color.css;將控制布局的css存放在layout.css;或者按區(qū)塊劃分：將頭部的css存放在header.css;將底部的css存放在footer.css;將側(cè)邊欄存放在sidebar.css;將主題存放在main.css。不同的角度有劃分都有自己的利與弊。
嶺南網(wǎng)絡(luò)給大家推薦一種css的劃分方法：base.css+common.css+page.css。將一個(gè)網(wǎng)站所有的樣式，按職能分成三大類(lèi)：base、common、page，在任何一個(gè)網(wǎng)頁(yè)最終樣式表現(xiàn)都由這三者完成的。
base層是網(wǎng)站頁(yè)面樣式所需依賴(lài)的最底層，相對(duì)穩(wěn)定基本不用維護(hù)。我們一般會(huì)在base.css存放以下內(nèi)容。
/*css reset 因?yàn)槊總€(gè)瀏覽器都會(huì)對(duì)一些標(biāo)簽屬性有默認(rèn)預(yù)設(shè)值，所以要要把一些標(biāo)簽屬性統(tǒng)一設(shè)置*/
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;}
/*長(zhǎng)度高度*/
.w10{width:10px;}
.h10{height:10px;}
/*邊距*/
.m10{margin:10px;}
.ml10px{margin-left:10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}
common層是位于中間層，提供組件級(jí)的CSS。我們可以將頁(yè)面內(nèi)的元素拆分為一小塊一小塊的功能和樣式相對(duì)獨(dú)立的“模板”，這些模板有些是很少重復(fù)的，有些會(huì)是大量重復(fù)的，我們可以將大量重復(fù)的樣式提取出來(lái)存放在common.css樣式中。如一個(gè)網(wǎng)站要用到很多重復(fù)的標(biāo)題，我們就可以這樣來(lái)編寫(xiě)：
.h2{font-size:14px;font-weight:bold;}
page層是頁(yè)面級(jí)的，建議將所有page層的css都存放在page.css里，可根據(jù)頁(yè)面配上注釋?zhuān)謮K書(shū)寫(xiě)，便于維護(hù)。如：
/*關(guān)于我們*/
.about-text{font-size:12px;}
/*聯(lián)系方式*/
.contact-text{font-size:14px;}
base層基本上是不用維護(hù)的，common層修改的幅度不會(huì)很大，page層代碼可能有多個(gè)工程師開(kāi)共同開(kāi)發(fā)，那要如何避免沖突呢?我們可以通過(guò)命名來(lái)避免沖突。可以將css命名規(guī)范為：駱駝命名法和劃線(xiàn)命名法。駱駝命名法：從第二個(gè)單詞開(kāi)始，將每個(gè)單詞的首字母大寫(xiě)。如dropMenu、subNavMenu.劃線(xiàn)命名法：用中劃線(xiàn)-，或者下劃線(xiàn)_分隔，如drop-menu、sub_nav_menu。
如果項(xiàng)目是由多個(gè)工程師來(lái)完成的，我們可以給每一個(gè)人分配一個(gè)獨(dú)立的命名ID。如嶺南網(wǎng)絡(luò)叫l(wèi)inknan，我們可以把名字開(kāi)頭的2個(gè)字母分配為獨(dú)立命名id，如：.ln-artice li。這樣就可以避免重復(fù)命名而產(chǎn)生沖突。
