上一篇《前端代碼標(biāo)準(zhǔn)最佳實(shí)踐：javascript》發(fā)表后，大家討論還是很熱烈，從側(cè)面體現(xiàn)了前端工程師對(duì)寫(xiě)標(biāo)準(zhǔn)的前端代碼的重視程度很高。這些最佳標(biāo)準(zhǔn)實(shí)踐并不是那個(gè)權(quán)威組織發(fā)布的，而是由大量的前端工程師們?cè)趯?shí)踐過(guò)程中的經(jīng)驗(yàn)總結(jié)，目的在于提高代碼的可讀性，可維護(hù)性和性能。那么接著上一篇，我們?cè)賮?lái)談?wù)凜SS代碼的一些標(biāo)準(zhǔn)實(shí)踐。
和其他語(yǔ)言規(guī)范一樣，css的命名也講究命名要有意義，命名要盡可能短但是要足夠表達(dá)含義；命名的詞用連字符連接。
不規(guī)范的命名：
1 2 3 4 5 6 | #navigation{}.demoimage{}.error_status{} |
規(guī)范的命名：
1 2 3 4 5 6 | #nav{}.demo-image{}.error-status{} |
不同的標(biāo)簽類(lèi)型盡可能不用相同的css類(lèi)名；盡可能不用標(biāo)簽類(lèi)型選擇器，用css類(lèi)名和ID足夠定義css，因?yàn)镮D是可以唯一確定Dom元素的，而css類(lèi)是不推薦用于不同的標(biāo)簽的；另外應(yīng)該少用ID選擇器定義，因?yàn)镮D的唯一性使得定義的css無(wú)法重用。
不規(guī)范定義：
1 2 3 4 | ul#menus{}div.info{} |
規(guī)范定義：
1 2 3 4 | .main-menus{}.info{} |
css的某些屬性定義可以可以分拆為各個(gè)獨(dú)立項(xiàng)，比如padding，border, margin, background, font等，雖然分拆定義的可讀性會(huì)好一些，但是就目前的經(jīng)驗(yàn)來(lái)看，前端工程師們對(duì)這些常用的css理解程度足夠好，合并后的定義不會(huì)對(duì)可讀性帶來(lái)影響，反而代碼更簡(jiǎn)潔；此外對(duì)屬性值為0的單位可以省略，在0后面添加入px em cm等單位是毫無(wú)意義的；對(duì)小數(shù)值可以省略小數(shù)點(diǎn)前的0；url值兩端的引號(hào)可以省略。
不規(guī)范的定義：
1 2 3 4 5 6 7 8 9 10 | border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;margin: 0.8em;background: #00FF00 url('bgimage.gif') no-repeat fixed top; |
規(guī)范定義：
1 2 3 4 5 | border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;margin: .8em;background: #00FF00 url(bgimage.gif) no-repeat fixed top; |
漂亮統(tǒng)一的代碼格式可以提高代碼的可讀性和可維護(hù)性，css的最佳代碼格式主要有以下幾點(diǎn)：定義順序以字母序排列，不考慮瀏覽器前綴；定義以分號(hào)結(jié)束；屬性名稱(chēng)定義的分號(hào)后添加一個(gè)空格；多個(gè)選擇器定義時(shí)，每個(gè)定義單獨(dú)占一行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /*css定義順序以字母序排列；結(jié)束用分號(hào)；屬性名稱(chēng)與值之間添加空格*/background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em;/*多個(gè)選擇器定義時(shí)，每個(gè)選擇器單獨(dú)占用一行*/h1,h2,h3 { font-weight: normal; line-height: 1.2;} |
避免寫(xiě)特定瀏覽器兼容代碼，這里說(shuō)的特定瀏覽器主要指的是萬(wàn)惡的IE系列瀏覽器，IE6，7尤為嚴(yán)重。碰到瀏覽器兼容問(wèn)題，首先考慮的是能否換一種其它的解決方案，如果沒(méi)有合適的解決方案，記得單獨(dú)寫(xiě)一個(gè)css文件給這些特定的瀏覽器，不要把兼容代碼和常規(guī)代碼混合，這樣方便代碼的維護(hù)，如果后期不支持這些老舊瀏覽器，可以直接刪除這些單獨(dú)的css文件即可。
1 2 3 4 5 6 | <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]--><!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]--> |
塊級(jí)元素顯示會(huì)獨(dú)占一行，而行內(nèi)元素不會(huì)獨(dú)占一行。常見(jiàn)的塊級(jí)元素有：div p ul ol table h1~h6 等；行內(nèi)元素有：a em label span strong 等。塊級(jí)元素的display默認(rèn)樣式是block，而行內(nèi)元素是inline，可以通過(guò)重新定義display來(lái)互轉(zhuǎn)塊級(jí)元素和行內(nèi)元素。但是記住以下的css樣式對(duì)行內(nèi)元素是無(wú)效的：width height 和垂直方向設(shè)置的margin padding，所以避免給行內(nèi)元素定義這些無(wú)用的樣式。
css的選擇器是有權(quán)重的，當(dāng)有多個(gè)樣式時(shí)，權(quán)重高的樣式會(huì)起作用。說(shuō)一個(gè)插曲，前段時(shí)間面試了不少前端工程師，問(wèn)得最多的一個(gè)問(wèn)題就是css權(quán)重問(wèn)題，很可惜的是知道css權(quán)重的不多。以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /*權(quán)重為1*/div{}/*權(quán)重為10*/.class1{}/*權(quán)重為100*/#id1{}/*權(quán)重為100+1=101*/#id1 div{}/*權(quán)重為10+1=11*/.class1 div{}/*權(quán)重為10+10+1=21*/.class1 .class2 div{} |
如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)，因?yàn)楣馐强壳昂蟮臉邮蕉x來(lái)影響最終的樣式是不靠譜的，也會(huì)給后期的維護(hù)埋下一個(gè)雷區(qū)；另外為了代碼的重用性，應(yīng)盡可能定義小的權(quán)重，這和不推薦使用id來(lái)定義樣式是一樣的道理。
各個(gè)瀏覽器對(duì)不同的標(biāo)簽有其不同的內(nèi)置的樣式，為了使得在不同的瀏覽器下標(biāo)簽的表現(xiàn)相同，可以定義一個(gè)單獨(dú)的base.css文件，重新定義各種標(biāo)簽的默認(rèn)樣式。另外推薦的css文件組織是：定義一個(gè)base.css，用于css reset，定義一個(gè)common.css，用于定義各種公用css類(lèi)。這里有一份base.css，其實(shí)是以上提到的base.css和common.css的合并，分享給大家：base.css
這種設(shè)計(jì)方式越來(lái)越受到大家的歡迎，各種前端框架中也能看到大量這樣的設(shè)計(jì)。設(shè)計(jì)的核心思想是：把css定義中的固定部分和可變部分分開(kāi)定義，使得代碼達(dá)到最大程度的重用，這樣的結(jié)果是增加了元素上添加的css類(lèi)個(gè)數(shù)，但是提高了代碼的維護(hù)性和可讀性。如下的例子代碼來(lái)自bootstrap的按鈕樣式定義
按鈕有一個(gè)固定的基礎(chǔ)樣式btn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .btn { display: inline-block; *display: inline; padding: 4px 10px 4px; margin-bottom: 0; *margin-left: .3em; font-size: 13px; line-height: 18px; *line-height: 20px; color: #333333; ... *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);} |
在此基礎(chǔ)上定義各種按鈕的特定樣式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .btn.disabled,.btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.btn-large [class^="icon-"] { margin-top: 1px;}.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px;}.btn-small [class^="icon-"] { margin-top: -1px;}.btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px;} |
另外再推薦一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。
這項(xiàng)技術(shù)是將多張背景圖合并為一張，然后通過(guò)設(shè)置不同的background-position屬性來(lái)展示不同的背景。現(xiàn)在越來(lái)越多的網(wǎng)站采用這項(xiàng)技術(shù)，例如：亞馬遜，蘋(píng)果，Google, YouTube等，我們目前的項(xiàng)目MSB也部分使用了這些技術(shù)。其優(yōu)點(diǎn)是減少http請(qǐng)求背景圖的次數(shù),降低服務(wù)器的壓力，頁(yè)面的背景圖能同時(shí)出現(xiàn)，避免出現(xiàn)空白背景。缺點(diǎn)是不好維護(hù)，另外有試驗(yàn)的結(jié)果顯示會(huì)稍微影響渲染的速度，因?yàn)橐?jì)算position，但是其優(yōu)點(diǎn)大于缺點(diǎn)，尤其是網(wǎng)站的背景圖多的時(shí)候?，F(xiàn)在也有多個(gè)工具可以幫助我們自動(dòng)合并背景圖和生成相應(yīng)的background-position。
http://spritegen.website-performance.org/
http://drupal.org/project/sprites
另外，如果你使用的是asp.net來(lái)開(kāi)發(fā)網(wǎng)站，可以使用微軟開(kāi)源的一款工具，可以在運(yùn)行時(shí)生成對(duì)應(yīng)的css srite。
具體參考這里：GENERATE CSS SPRITES IN ASP.NET
以上就是我認(rèn)為比較重要CSS標(biāo)準(zhǔn)實(shí)踐，都是從整體來(lái)關(guān)注css的標(biāo)準(zhǔn)實(shí)踐，其實(shí)css中細(xì)節(jié)的的一些最佳實(shí)踐還有很多，需要具體問(wèn)題需要具體討論，目前各個(gè)工程師寫(xiě)的css代碼多種多樣，也比較混亂，也與css代碼容易上手并且相同的效果實(shí)現(xiàn)方法有多種多樣有關(guān)。不管語(yǔ)言的靈活性如何，養(yǎng)成一個(gè)良好的寫(xiě)代碼習(xí)慣非常重要，這些需要在實(shí)踐中不斷總結(jié)和提高，希望這篇文章能給剛開(kāi)始學(xué)習(xí)css的同行們提供一些幫助，在技術(shù)的提高過(guò)程中少走一些彎路。
聯(lián)系客服
