在注釋中應(yīng)當(dāng)盡量詳細(xì)描述代碼，因?yàn)閷?duì)你來(lái)說(shuō)清晰易懂的內(nèi)容對(duì)其他人可能并非如此。每寫一部分代碼就要專門寫注釋以詳解。
注釋的拓展用法

注釋有許多很高級(jí)的用法，例如：

    準(zhǔn)修飾選擇器（Quasi-qualified selectors）
    代碼標(biāo)簽
    繼承標(biāo)記

　　準(zhǔn)修飾選擇器（Quasi-qualified selectors）

你應(yīng)當(dāng)避免過(guò)分修飾選擇器，例如如果你能寫 .nav{} 就盡量不要寫 ul.nav{}。過(guò)分修飾選擇器將影響性能，影響 class 復(fù)用性，增加選擇器私有度。這些都是你應(yīng)當(dāng)竭力避免的。

不過(guò)有時(shí)你可能希望告訴其他開發(fā)者 class 的使用范圍。以 .product-page 為例，這個(gè) class 看起來(lái)像是一個(gè)根容器，可能是 html 或者 body 元素，但是僅憑 .product-page 則無(wú)法判斷。

我們可以在選擇器前加上準(zhǔn)修飾（即將前面的類型選擇器注釋掉）來(lái)描述我們規(guī)劃的 class 作用范圍：

CSS Code復(fù)制內(nèi)容到剪貼板

1. /*html*/.product-page{}  

這樣我們就能準(zhǔn)確獲知該 class 的作用范圍而不會(huì)影響復(fù)用性。

其它例子如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. /*ol*/.breadcrumb{}   

2. /*p*/.intro{}   

3. /*ul*/.image-thumbs{}  

這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。
　　代碼標(biāo)簽

如果你寫了一組新樣式的話，可以在它上面加上標(biāo)簽，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. /** 

2.  * ^navigation ^lists 

3.  */  

4. .nav{}   

5.   

6. /** 

7.  * ^grids ^lists ^tables 

8.  */  

9. .matrix{}  

這些標(biāo)簽可以使得其他開發(fā)者快速找到相關(guān)代碼。如果一個(gè)開發(fā)者需要查找和列表相關(guān)的部分，他只要搜索 ^lists 就能快速定位到 .nav，.matrix 以及其它相關(guān)部分。
　　繼承標(biāo)記

將面向?qū)ο蟮乃悸酚糜?CSS 編寫的話，你經(jīng)常能找到兩部分 CSS 密切相關(guān)（其一為基礎(chǔ)，其一為拓展）卻分列兩處。我們可以用繼承標(biāo)記來(lái)在原元素和繼承元素之間建立緊密聯(lián)系。這些在注釋中的寫法如下：

在元素的基本樣式中：

CSS Code復(fù)制內(nèi)容到剪貼板

1. /** 

2.  * Extend `.foo` in theme.css 

3.  */  

4.  .foo{}  

在元素的拓展樣式中：

CSS Code復(fù)制內(nèi)容到剪貼板

1. /** 

2.  * Extends `.foo` in base.css 

3.  */  

4.  .bar{}  

這樣一來(lái)我們就能在兩塊相隔很遠(yuǎn)的代碼間建立緊密聯(lián)系。
　編寫 CSS

之前的章節(jié)主要探討如何規(guī)劃 CSS，這些都是易于量化的規(guī)則。本章將探討更理論化的東西，也將探討我們的態(tài)度與方法。
　編寫新組件

編寫新組件時(shí)，要在著手處理 CSS 之前寫好 HTML 部分。這可以令你準(zhǔn)確判斷哪些 CSS 屬性可以繼承，避免重復(fù)浪費(fèi)。

先寫標(biāo)記的話，你就可以關(guān)注數(shù)據(jù)、內(nèi)容與語(yǔ)義，在這之后再添加需要的 class 和 CSS 樣式。
　面向?qū)ο?CSS

我以面向?qū)ο?CSS 的方式寫代碼。我把組件分成結(jié)構(gòu)（對(duì)象）與外觀（拓展）。正如以下分析（注意此處并非示例）：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .room{}   

2.   

3. .room--kitchen{}   

4. .room--bedroom{}   

5. .room--bathroom{}  

我們?cè)谖葑永镉性S多房間，它們都有共同的部分：地板、天花板、墻壁和門。這些共享的部分我們可以放到一個(gè)抽象的 .room{} class 中。不過(guò)我們還有其它與眾不同的房間：一個(gè)廚房可能有地磚，臥室可能有地毯，洗手間可能沒(méi)有窗戶但是臥室會(huì)有，每個(gè)房間的墻壁顏色也許也會(huì)不一樣。面向?qū)?象 CSS 的思路使得我們把相同部分抽象出來(lái)組成結(jié)構(gòu)部分，然后用更具體的 class 來(lái)拓展這些特征并添加特殊的處理方法。

所以比起編寫大量各自不同的模塊，應(yīng)當(dāng)努力找出這些模塊中重復(fù)的設(shè)計(jì)模式并將其抽象出來(lái)，寫成一個(gè)可以復(fù)用的 class，將其用作基礎(chǔ)然后編寫其它拓展模塊的特殊情形。

當(dāng)你要編寫一個(gè)新組件時(shí)，將其拆分成結(jié)構(gòu)和外觀。編寫結(jié)構(gòu)部分時(shí)用最通用 class 以保證復(fù)用性，編寫外觀時(shí)用更具體的 class 來(lái)添加設(shè)計(jì)方法。
　布局

所有組件都不要聲明寬度，而由其親元素或格柵系統(tǒng)來(lái)決定。

堅(jiān)決不要聲明高度。高度應(yīng)當(dāng)僅僅用于尺寸已經(jīng)固定的東西，例如圖片和 CSS Sprite。在 p，ul，div 等元素上不應(yīng)當(dāng)聲明高度。如果需要的話可以使用更加靈活的 line-height。

格柵系統(tǒng)應(yīng)當(dāng)當(dāng)作書架來(lái)理解。是它們?nèi)菁{內(nèi)容，而不是把它們本身當(dāng)成內(nèi)容裝起來(lái)，正如你先搭起書架再把東西放進(jìn)去。比起聲明它們的尺寸，把格柵系統(tǒng)和元素的其它屬性分來(lái)開處理更有助于布局，也使得我們的前端工作更高效。

你在格柵系統(tǒng)上不應(yīng)當(dāng)添加任何樣式，它們僅僅是為布局而用。在格柵系統(tǒng)內(nèi)部再添加樣式。在格柵系統(tǒng)中任何情況下都不要添加盒模型相關(guān)屬性。
　UI 尺寸

我用很多方法設(shè)定 UI 尺寸，包括百分比，px，em，rem 以及干脆什么都不用。

理想情況下，格柵系統(tǒng)應(yīng)當(dāng)用百分比設(shè)定。如上所述，因?yàn)槲矣酶駯畔到y(tǒng)來(lái)固定欄寬和頁(yè)寬，所以我可以不用理會(huì)元素的尺寸。

我用 rem 定義字號(hào)，并且輔以 px 以兼容舊瀏覽器。這可以兼具 em 和 px 的優(yōu)勢(shì)。下面是一個(gè)非常漂亮的 Sass Mixin，假設(shè)你在別處聲明了基本字號(hào)（base-font-size）的話，用它就可以生成 rem 以及兼容舊瀏覽器的 px。

CSS Code復(fù)制內(nèi)容到剪貼板

1. @mixin font-size($font-size){   

2.     font-size:$font-size +px;   

3.     font-size:$font-size / $base-font-size +rem;   

4. }  

我只在已經(jīng)固定尺寸的元素上使用 px，包括圖片以及尺寸已經(jīng)用 px 固定的 CSS Sprite。
　　字號(hào)

我會(huì)定義一些與格柵系統(tǒng)原理類似的 class 來(lái)聲明字號(hào)。這些 class 可以用于雙重標(biāo)題分級(jí)，關(guān)于這點(diǎn)請(qǐng)閱讀 Pragmatic, practical font-sizing in CSS。
　簡(jiǎn)寫

CSS 簡(jiǎn)寫應(yīng)當(dāng)謹(jǐn)慎使用。

編寫像 background: red; 這樣的屬性的確很省事，但是你這么寫的意思其實(shí)是同時(shí)聲明 background-image: none; background-position: top left; background-repeat: repeat; background-color: red;。雖然大多數(shù)時(shí)候這樣不會(huì)出什么問(wèn)題，但是哪怕只出一次問(wèn)題就值得考慮要不要放棄簡(jiǎn)寫了。這里應(yīng)當(dāng)改為 background-color: red;。

類似的，像 margin: 0; 這樣的聲明的確簡(jiǎn)潔清爽，但是還是應(yīng)當(dāng)盡量寫清楚。如果你只是想修改底邊邊距，就要具體一些，寫成 margin-bottom: 0;。

與此同時(shí)你需要聲明的屬性也要寫清楚，不要因?yàn)楹?jiǎn)寫而波及其它屬性。例如如果你只想改掉底部的 margin，那就不要用會(huì)把其它邊距也清零的 margin: 0。

簡(jiǎn)寫雖然好，但也很容易濫用。
　ID

在我們開始處理選擇器之前，牢記這句話：

在 CSS 里堅(jiān)決不要用 ID。

在 HTML 里 ID 可以用于 JS 以及錨點(diǎn)定位，但是在 CSS 里只要用 class，一個(gè) ID 也不要用。

Class 的優(yōu)勢(shì)在于復(fù)用性，而且私有度也并不高。在項(xiàng)目中私有度非常容易導(dǎo)致問(wèn)題，所以將其降低就尤為重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中堅(jiān)決不要使用。
　選擇器

務(wù)必保持選擇器簡(jiǎn)短高效。

通過(guò)頁(yè)面元素位置而定位的選擇器并不理想。例如 .sidebar h4 span{} 這樣的選擇器就是定位過(guò)于依賴相對(duì)位置，如果把 span 移到 h4 和 sidebar 外面時(shí)就很難保持其樣式。

結(jié)構(gòu)復(fù)雜的選擇器將會(huì)影響性能。選擇器結(jié)構(gòu)越復(fù)雜（如 .sidebar h4 span 為三層，.content ul p a 是四層），瀏覽器的開銷就越大。

盡量使得樣式不依賴于其定位，盡量保持選擇器簡(jiǎn)潔清晰。

作為一個(gè)整體，選擇器應(yīng)當(dāng)盡量簡(jiǎn)短（例如只有一層結(jié)構(gòu)），但是 class 名則不應(yīng)當(dāng)過(guò)于簡(jiǎn)略，例如 .user-avatar 就遠(yuǎn)比 .usr-avt 好。

牢記：class 無(wú)所謂是否語(yǔ)義化；應(yīng)當(dāng)關(guān)注它們是否合理。不要強(qiáng)調(diào) class 名要符合語(yǔ)義，而要注重使用合理且不會(huì)過(guò)時(shí)的名稱。
　過(guò)度修飾的選擇器

由前文所述，過(guò)度修飾的選擇器并不理想。

過(guò)度修飾的選擇器是指像 div.promo 這樣的。很可能你只用 .promo 也能得到相同的效果。當(dāng)然你可能偶爾會(huì)需要用元素類型來(lái)修飾 class（例如你寫了一個(gè) .error 而且想讓它在不同的元素類型中顯示效果不一樣，例如 .error { color: red; } div.error { padding: 14px; }），但是大多數(shù)時(shí)候還是應(yīng)當(dāng)盡量避免。

再舉一個(gè)修飾過(guò)度的選擇器例子，ul.nav li a{}。如前文所說(shuō)，我們馬上就可以刪掉 ul 因?yàn)槲覀冎?.nav 是個(gè)列表，然后我們就可以發(fā)現(xiàn) a 一定在 li 中，所以我們就能將這個(gè)選擇器改寫成 .nav a{}。
　選擇器性能

雖然瀏覽器性能日漸提升，渲染 CSS 速度越來(lái)越快，但是你還是應(yīng)當(dāng)關(guān)注效率。使用簡(jiǎn)短、沒(méi)有嵌套的選擇器，不使用全局選擇器（* {}）作為核心選擇器，避免使用日漸復(fù)雜的 CSS3 新選擇器可以避免這樣的問(wèn)題。

譯注，核心選擇器：瀏覽器解析選擇器為從右向左的順序，最右端的元素是樣式生效的元素，是為核心選擇器。
　使用 CSS 選擇器的目的

比起努力運(yùn)用選擇器定位到某元素，更好的辦法是給你想要添加樣式的元素直接添加一個(gè) class。我們以 .header ul {} 這樣一個(gè)選擇器為例。

假定這個(gè) ul 就是這個(gè)網(wǎng)站的全站導(dǎo)航，它位于 header 中，而且目前為止是 header 中唯一的 ul 元素。.header ul{} 的確可以生效，但是這樣并不是好方法，它很容易過(guò)時(shí)，而且非?；逎?。如果我們?cè)?header 中再添加一個(gè) ul 的話，它就會(huì)套用我們給這個(gè)導(dǎo)航部分寫的樣式，哪怕我們?cè)O(shè)想的不是這個(gè)效果。這意味著我們要么要重構(gòu)許多代碼，要么給后面的 ul 新寫許多樣式來(lái)抵消之前的影響。

你的選擇器必須符合你要給這個(gè)元素添加樣式的原因。思考一下，「我定位到這個(gè)元素，是因?yàn)樗?.header 下的 ul，還是因?yàn)樗俏业木W(wǎng)站導(dǎo)航？」這將決定你應(yīng)當(dāng)如何使用選擇器。

確保你的核心選擇器不是類型選擇器，也不是高級(jí)對(duì)象或抽象選擇器。例如你在我們的 CSS 中肯定找不到諸如 .sidebar ul {} 或者 .footer .media {} 這樣的選擇器。

表達(dá)清晰：直接找到你要添加樣式的元素，而非其親元素。不要想當(dāng)然地認(rèn)為 HTML 不會(huì)改變。用 CSS 直接命中你需要的元素，而非投機(jī)取巧。

　!important

只在起輔助作用的 class 上用 !important。用 !important 提升優(yōu)先級(jí)也可以，例如如果你要讓某條規(guī)則一直生效的話，可以用 .error { color:red!important; }。

避免主動(dòng)使用 !important。例如 CSS 寫得很復(fù)雜時(shí)不要用它來(lái)取巧，要好好整理并重構(gòu)之前的部分，保持選擇器簡(jiǎn)短并且避免用 ID 將效果拔群。
　魔數(shù)與絕對(duì)定位

魔數(shù)（Magic Number）是指那些「湊巧有效果」的數(shù)字，使用魔數(shù)非常不好，因?yàn)樗鼈冎皇侵螛?biāo)不治本而且缺乏拓展性。

例如使用 .dropdown-nav li:hover ul { top: 37px; } 把下拉菜單移動(dòng)下來(lái)遠(yuǎn)非良策，因?yàn)檫@里的 37px 就是個(gè)魔數(shù)。37px 會(huì)生效的原因是因?yàn)檫@時(shí) .dropbox-nav 碰巧高 37px 而已。

這時(shí)你應(yīng)該用 .dropdown-nav li:hover ul { top: 100%; }，也即無(wú)論 .dropbox-down 多高，這個(gè)下拉菜單都會(huì)往下移動(dòng) 100%。

每當(dāng)你要在代碼中放入數(shù)字的時(shí)候，請(qǐng)三思而行。如果你能用一個(gè)關(guān)鍵字（例如 top: 100% 意即「從上面拉到最下面」）替換之，或者有更好的解決方法的話，就盡量避免直接出現(xiàn)數(shù)字。

你在 CSS 中留下的每一個(gè)數(shù)字，都是你許下而不愿遵守的承諾。
　條件判斷

專門為 IE 寫的樣式基本上都是可以避免的，唯一需要為 IE 專門處理的是為了處理 IE 不支持的內(nèi)容（例如 PNG）。

簡(jiǎn)而言之，如果你重構(gòu) CSS 的話，所有的布局和盒模型都不用額外兼容 IE。也就是說(shuō)你基本上不用 或者類似的兼容 IE 的寫法。
　Debugging

如果你要解決 CSS 問(wèn)題的話，先把舊代碼拿掉再寫新的。如果舊的 CSS 中有問(wèn)題的話，寫新代碼是解決不了的。

把 CSS 代碼和 HTML 部分刪掉，直到?jīng)]有 BUG 為止，然后你就知道問(wèn)題出在哪里了。

有時(shí)候?qū)懮弦粋€(gè) overflow: hidden 或者其它能把問(wèn)題藏起來(lái)的代碼的確效果立竿見影，但是 overflow 方面可能根本就沒(méi)問(wèn)題。所以要治本，而不是單純治標(biāo)。
　CSS 預(yù)處理器

我用 Sass。使用時(shí)應(yīng)當(dāng)靈活運(yùn)用。用 Sass 可以令你的 CSS 更強(qiáng)大，但是不要嵌套得太復(fù)雜。在 Vanilla CSS 中，只在必要的地方用嵌套即可，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .header{}   

2. .header .site-nav{}   

3. .header .site-nav li{}   

4. .header .site-nav li a{}  

這樣的寫法在普通 CSS 里完全用不到。以下為不好的 Sass 寫法：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .header{   

2.     .site-nav{   

3.         li{   

4.             a{}   

5.         }   

6.     }   

7. }  

如果你用 Sass 的話，盡量這么寫：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .header{}   

2. .site-nav{   

3.     li{}   

4.     a{}   

5. }  

“CSS有哪些編程規(guī)范”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！