CSS有哪些編程規(guī)范

本篇內(nèi)容介紹了“CSS有哪些編程規(guī)范”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

在參與規(guī)模龐大、歷時漫長且參與人數(shù)眾多的項目時，所有開發(fā)者遵守如下規(guī)則極為重要：

    保持 CSS 易于維護
    保持代碼清晰易懂
    保持 CSS 的可拓展性

　　為了實現(xiàn)這一目標，我們要采用諸多方法。

　　本文檔第一部分將探討語法、格式以及分析 CSS 結(jié)構(gòu)；第二部分將圍繞方法論、思維框架以及編寫與規(guī)劃 CSS 的看法。
CSS 文檔分析

　　無論編寫什么文檔，我們都應(yīng)當維持統(tǒng)一的風(fēng)格，包括統(tǒng)一的注釋、統(tǒng)一的語法與統(tǒng)一的命名規(guī)范。
　　總則

　　將行寬控制在 80 字節(jié)以下。漸變（gradient）相關(guān)的語法以及注釋中的 URL 等可以算作例外，畢竟這部分我們也無能為力。

　　我傾向于用 4 個空格而非 Tab 縮進，并且將聲明拆分成多行。
　　單一文件與多文件

　　有人喜歡在一份文件文件中編寫所有的內(nèi)容，而我在遷移至 Sass 之后開始將樣式拆分成多個小文件。這都是很好的做法。無論你選擇哪種，下文的規(guī)則都將適用，而且如果你遵守這些規(guī)則的話你也不會遇到什么問題。這兩種寫法的區(qū)別僅僅在于目錄以及區(qū)塊標題：
　　目錄

　　在 CSS 的開頭，我會維護一份目錄，就像這樣：

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

1. /*------------------------------------*\  

2.     $CONTENTS  

3. \*------------------------------------*/  

4. /**  

5.  * CONTENTS............You’re reading it!  

6.  * RESET...............Set our reset defaults  

7.  * FONT-FACE...........Import brand font files  

8.  */    

　　這份目錄可以告訴其他開發(fā)者這個文件中具體含有哪些內(nèi)容。這份目錄中的每一項都與其對應(yīng)的區(qū)塊標題相同。

　　如果你在維護一份單文件 CSS，對應(yīng)的區(qū)塊將也在同一文件中。如果你是在編寫一組小文件，那么目錄中的每一項應(yīng)當對應(yīng)相應(yīng)的 @include 語句。
　　區(qū)塊標題

　　目錄應(yīng)當對應(yīng)區(qū)塊的標題。如下：

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

1. /*------------------------------------*\  

2.     $RESET  

3. \*------------------------------------*/  

　　區(qū)塊標題前綴 $ 可以讓我們使用 [Cmd|Ctrl]+F 命令查找標題名時將搜索范圍限制在區(qū)塊標題中。

　　如果你在維護一份大文件，那么在區(qū)塊之間空 5 行，如下：

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

1. /*------------------------------------*\  

2.     $RESET  

3. \*------------------------------------*/  

4. [Our   

5. reset   

6. styles]   

7.   

8.   

9.   

10.   

11.   

12. /*------------------------------------*\  

13.     $FONT-FACE  

14. \*------------------------------------*/  

　　在大文件中快速翻動時這些大塊的空檔有助于區(qū)分區(qū)塊。

　　如果你在維護多份以 include 連接的 CSS 的話，在每份文件頭加上標題即可，不必這樣空行。
　代碼順序

　　盡量按照特定順序編寫規(guī)則，這將確保你充分發(fā)揮 CSS 中第一個 C 的意義：cascade，層疊。

　　一份規(guī)劃良好的 CSS 應(yīng)當按照如下排列：

    Reset 萬物之根源
    元素類型 沒有 class 的 h2、ul 等
    對象以及抽象內(nèi)容 最一般、最基礎(chǔ)的設(shè)計模式
    子元素 由對象延伸出來的所有拓展及其子元素
    修補 針對異常狀態(tài)

　　如此一來，當你依次編寫 CSS 時，每個區(qū)塊都可以自動繼承在它之前區(qū)塊的屬性。這樣就可以減少代碼相互抵消的部分，減少某些特殊的問題，組成更理想的 CSS 結(jié)構(gòu)。

　　關(guān)于這方面的更多信息，強烈推薦 Jonathan Snook 的 SMACSS。
　CSS 樣式集分析

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

1. [selector]{   

2.     [property]:[value];   

3.     [<- Declaration ->]   

4. }   

5.   

6. [選擇器]{   

7.     [屬性]:[值];   

8.     [<- 聲明 ->]   

9. }   

　　編寫 CSS 樣式時，我習(xí)慣遵守這些規(guī)則：

    class 名稱以連字符（-）連接，除了下文提到的 BEM 命名法；
    縮進 4 空格；
    聲明拆分成多行；
    聲明以相關(guān)性順序排列，而非字母順序；
    有前綴的聲明適當縮進，從而對齊其值；
    縮進樣式集從而反映 DOM；
    保留最后一條聲明結(jié)尾的分號。

　　例如：

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

1. .widget{   

2.     padding:10px;   

3.     border:1px solid #BADA55;   

4.     background-color:#C0FFEE;   

5.     -webkit-border-radius:4px;   

6.        -moz-border-radius:4px;   

7.             border-radius:4px;   

8. }   

9.     .widget-heading{   

10.         font-size:1.5rem;   

11.         line-height:1;   

12.         font-weight:bold;   

13.         color:#BADA55;   

14.         margin-right:-10px;   

15.         margin-left: -10px;   

16.         padding:0.25em;   

17.     }    

　　我們可以發(fā)現(xiàn)，.widget-heading 是 .widget 的子元素，因為前者的樣式集比后者多縮進了一級。這樣通過縮進就可以讓開發(fā)者在閱讀代碼時快速獲取這樣的重要信息。

　　我們還可以發(fā)現(xiàn) .widget-heading 的聲明是根據(jù)其相關(guān)性排列的：.widget-heading 是行間元素，所以我們先添加字體相關(guān)的樣式聲明，接下來是其它的。

　　以下是一個沒有拆分成多行的例子：

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

1. .t10    { width:10% }   

2. .t20    { width:20% }   

3. .t25    { width:25% }       /* 1/4 */  

4. .t30    { width:30% }   

5. .t33    { width:33.333% }   /* 1/3 */  

6. .t40    { width:40% }   

7. .t50    { width:50% }       /* 1/2 */  

8. .t60    { width:60% }   

9. .t66    { width:66.666% }   /* 2/3 */  

10. .t70    { width:70% }   

11. .t75    { width:75% }       /* 3/4*/  

12. .t80    { width:80% }   

13. .t90    { width:90% }   

　　在這個例子（來自inuit.css&rsquo;s table grid system）中，將 CSS 放在一行內(nèi)可以使得代碼更緊湊。
　命名規(guī)范

　　一般情況下我都是以連字符（-）連接 class 的名字（例如 .foo-bar 而非 .foo_bar 或 .fooBar），不過在某些特定的時候我會用 BEM（Block, Element, Modifier）命名法。

　　BEM 命名法可以使得選擇器更規(guī)范，更清晰，更具語義。

　　該命名法按照如下格式：

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

1. .block{}   

2. .block__element{}   

3. .block--modifier{}  

　　其中：

    .block 代表某個基本的抽象元素；
    .block__element 代表構(gòu)成 .block 的一個子元素；
    .block--modifier 代表 .block 的某個不同狀態(tài)或版本。

　　打個比方：

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

1. .person{}   

2. .person--woman{}   

3.     .person__hand{}   

4.     .person__hand--left{}   

5.     .person__hand--rightright{}  

　　這個例子中我們描述的基本元素是一個人，然后這個人可能是一個女人。我們還知道人擁有手，這些是人體的一部分，而手也有不同的狀態(tài)，如同左手與右手。

　　這樣我們就可以根據(jù)親元素來劃定選擇器的命名空間并傳達該選擇器的職能，例如根據(jù)這個選擇器是一個子元素（__）還是其親元素的不同狀態(tài)（--）。

　　由此，.page-wrapper 是一個獨立的選擇器。這是一個符合規(guī)范的命名，因為它不是其它元素的子元素或其它狀態(tài)；然而 .widget-heading 則與其它對象有關(guān)聯(lián)，它應(yīng)當是 .widget 的子元素，所以我們應(yīng)當將其重命名為 .widget__heading。

　　BEM 命名法雖然不太好看，而且相當冗長，但是它使得我們可以通過名稱快速獲知元素的功能和元素之間的關(guān)系。與此同時，BEM 語法中的重復(fù)部分非常有利于 gzip 的壓縮算法。

　　無論你是否使用 BEM 命名法，你都應(yīng)當確保 class 命名得當，力保一字不多、一字不少；將元素命名抽象化以提高復(fù)用性（例如 .ui-list，.media）。子元素的命名則要盡量精準（例如 .user-avatar-link）。不用擔心 class 名的數(shù)量或長度，因為寫得好的代碼 gzip 也能有效壓縮。
　　HTML 中的 class

　　為了確保易讀性，在 HTML 標記中用兩個空格隔開 class 名，例如：

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

1. <div class="foo--bar  bar__baz">  

　　增加的空格應(yīng)當可以使得在使用多個 class 時更易閱讀與定位。
　　JavaScript 鉤子

　　切勿將標記 CSS 樣式的 class 用作 JavaScript 鉤子。把 JS 行為與樣式混在一起將無法對其分別處理。

　　如果你要把 JS 和某些標記綁定起來的話，寫一個 JS 專用的 class。簡單地說就是劃定一個前綴 .js- 的命名空間，例如 .js-toggle，.js-drag-and-drop。這意味著我們可以通過 class 同時綁定 JS 和 CSS 而不會因為沖突而引發(fā)麻煩。

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

1. <th class="is-sortable  js-is-sortable">  

2. </th>  

　　上面的這個標記有兩個 class，你可以用其中一個來給這個可排序的表格欄添加樣式，用另一個添加排序功能。
　　I18n

　　雖然我（該 CSS Guideline 文檔原作者 Harry Roberts）是個英國人，而且我一向拼寫 colour 而非 color，但是為了追求統(tǒng)一，我認為在 CSS 中用美式拼法更佳。CSS 以及其它多數(shù)語言都是以美式拼法編寫，所以如果在 .colour-picker{} 中寫 color:red 就缺乏統(tǒng)一性。我以前主張同時用兩種拼法，例如：

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

1. .color-picker,   

2. .colour-picker{   

3. }  

　　但是我最近參與了一份規(guī)模龐大的 Sass 項目，這個項目中有許多的顏色變量（例如 $brand-color，$highlight-color 等等），每個變量要維護兩種拼法實在辛苦，要查找并替換時也需要兩倍的工作量。

　　所以為了統(tǒng)一，把所有的 class 與變量都以你參與的項目的慣用拼法命名即可。
　注釋

　　我使用行寬不超過 80 字節(jié)的文檔塊風(fēng)格注釋：

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

1. /**  

2.  * This is a docBlock style comment  

3.  *   

4.  * This is a longer description of the comment, describing the code in more  

5.  * detail. We limit these lines to a maximum of 80 characters in length.  

6.  *   

7.  * We can have markup in the comments, and are encouraged to do so:  

8.  *   

9.    <div class=foo>  

10.        <p>Lorem</p>  

11.    </div>  

12.  *   

13.  * We do not prefix lines of code with an asterisk as to do so would inhibit  

14.  * copy and paste.  

15.  */  

16.   

17.   

18. /**  

19.  * 這是一個文檔塊（DocBlock）風(fēng)格的注釋。  

20.  *  

21.  * 這里開始是描述更詳細、篇幅更長的注釋正文。當然，我們要把行寬控制在 80 字節(jié)以內(nèi)。  

22.  *  

23.  * 我們可以在注釋中嵌入 HTML 標記，而且這也是個不錯的辦法：  

24.  *  

25.     <div class=foo>  

26.         <p>Lorem</p>  

27.     </div>  

28.  *  

29.  * 如果是注釋內(nèi)嵌的標記的話，在它前面不加星號，以免被復(fù)制進去。  

30.  */  

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

　　注釋有許多很高級的用法，例如：

    準修飾選擇器（Quasi-qualified selectors）
    代碼標簽
    繼承標記

　　準修飾選擇器（Quasi-qualified selectors）

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

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

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

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

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

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

　　其它例子如：

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

1. /*ol*/.breadcrumb{}   

2. /*p*/.intro{}   

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

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

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

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

1. /**  

2.  * ^navigation ^lists  

3.  */  

4. .nav{}   

5.   

6. /**  

7.  * ^grids ^lists ^tables  

8.  */  

9. .matrix{}  

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

　　將面向?qū)ο蟮乃悸酚糜?CSS 編寫的話，你經(jīng)常能找到兩部分 CSS 密切相關(guān)（其一為基礎(chǔ)，其一為拓展）卻分列兩處。我們可以用繼承標記來在原元素和繼承元素之間建立緊密聯(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{}  

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

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

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

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

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

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

1. .room{}   

2.   

3. .room--kitchen{}   

4. .room--bedroom{}   

5. .room--bathroom{}  

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

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

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

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

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

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

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

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

　　理想情況下，格柵系統(tǒng)應(yīng)當用百分比設(shè)定。如上所述，因為我用格柵系統(tǒng)來固定欄寬和頁寬，所以我可以不用理會元素的尺寸。

　　我用 rem 定義字號，并且輔以 px 以兼容舊瀏覽器。這可以兼具 em 和 px 的優(yōu)勢。下面是一個非常漂亮的 Sass Mixin，假設(shè)你在別處聲明了基本字號（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。
　　字號

　　我會定義一些與格柵系統(tǒng)原理類似的 class 來聲明字號。這些 class 可以用于雙重標題分級，關(guān)于這點請閱讀 Pragmatic, practical font-sizing in CSS。
　簡寫

　　CSS 簡寫應(yīng)當謹慎使用。

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

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

　　與此同時你需要聲明的屬性也要寫清楚，不要因為簡寫而波及其它屬性。例如如果你只想改掉底部的 margin，那就不要用會把其它邊距也清零的 margin: 0。

　　簡寫雖然好，但也很容易濫用。
　ID

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

　　在 CSS 里堅決不要用 ID。

　　在 HTML 里 ID 可以用于 JS 以及錨點定位，但是在 CSS 里只要用 class，一個 ID 也不要用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　你的選擇器必須符合你要給這個元素添加樣式的原因。思考一下，「我定位到這個元素，是因為它是 .header 下的 ul，還是因為它是我的網(wǎng)站導(dǎo)航？」這將決定你應(yīng)當如何使用選擇器。

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

　　表達清晰：直接找到你要添加樣式的元素，而非其親元素。不要想當然地認為 HTML 不會改變。用 CSS 直接命中你需要的元素，而非投機取巧。

　!important

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

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

　　魔數(shù)（Magic Number）是指那些「湊巧有效果」的數(shù)字，使用魔數(shù)非常不好，因為它們只是治標不治本而且缺乏拓展性。

　　例如使用 .dropdown-nav li:hover ul { top: 37px; } 把下拉菜單移動下來遠非良策，因為這里的 37px 就是個魔數(shù)。37px 會生效的原因是因為這時 .dropbox-nav 碰巧高 37px 而已。

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

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

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

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

　　簡而言之，如果你重構(gòu) CSS 的話，所有的布局和盒模型都不用額外兼容 IE。也就是說你基本上不用 <!--[if IE 7]> element{ margin-left:-9px; } < ![endif]--> 或者類似的兼容 IE 的寫法。
　Debugging

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

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

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

　　我用 Sass。使用時應(yīng)當靈活運用。用 Sass 可以令你的 CSS 更強大，但是不要嵌套得太復(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)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！