摘要：使用帶前綴的命名空間可以防止命名沖突，同時(shí)提高代碼可維護(hù)性。聲明結(jié)束每行都應(yīng)以分號(hào)結(jié)尾。排查法檢查是否正確檢查下有拼寫錯(cuò)誤是否忘記結(jié)尾的等?？梢岳麃?lái)檢查的拼寫錯(cuò)誤。本是為減肥的具，但也能檢查出拼寫錯(cuò)誤。

1.id 和 class 的命名總規(guī)則為：內(nèi)容優(yōu)先，表現(xiàn)為輔。?先根據(jù)內(nèi)容來(lái)命名，?如 main-nav。如 果根據(jù)內(nèi)容找不到合適的命名，可以再結(jié)合表現(xiàn)來(lái)定，?如 skin-blue，present-tab，col-main。

2.使用有含義的 id 和 class 名稱。

    /* Not recommended: meaningless */
    #yee-1901 {}

    /* Not recommended: presentational */
    .button-green {}
    .clear {}
    /* Recommended: specific */
    #gallery {}
    #login {}
    .video {}

    /* Recommended: generic */
    .aux {}
    .alt {}

3.應(yīng)該盡量簡(jiǎn)短，同時(shí)要容易理解。

    /* Not recommended */
    #navigation {}
    .atr {}
    /* Recommended */
    #nav {}
    .author {}

4.除非需要，否則不要在 id 或 class 前加元素名，否則會(huì)使選擇器效率變低。

    /* Not recommended */
    ul#example {}
    div.error {}
    /* Recommended */
    #example {}
    .error {}

5.盡量使用 CSS 中可以簡(jiǎn)寫的屬性 (如 font)，可以提高編碼效率以及代碼可讀性。

    /* Not recommended */
    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;
    /* Recommended */
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;

6.使用帶前綴的命名空間可以防止命名沖突，同時(shí)提高代碼可維護(hù)性。

    .adw-help {} /* AdWords */
    #maia-note {} /* Maia */
    ID 和 Class 命名分隔符
    選擇器中使用連字符可以提高可讀性。
    /* Not recommended: does not separate the words “demo” and “image” */
    .demoimage {}

    /* Not recommended: uses underscore instead of hyphen */
    .error_status {}
    /* Recommended */
    #video-id {}
    .ads-sample {}

7.id使?下劃線進(jìn)?連接，如 product_title。class使?連字符進(jìn)?連接，如 product-lists。這樣容易區(qū)分，同時(shí)對(duì)腳本 調(diào)試有幫助。

8.id和class名稱中只能出現(xiàn)26個(gè)英?字母、數(shù)字、下劃線"_"連接符"-" ，任何其它字符都是不被允許使?的。盡量?英?單詞命名。對(duì)于某些產(chǎn)品特?詞匯，也可以使?拼?，其它任何情況下都不使?拼?。

1.書寫順序:按照屬性首字母順序書寫 CSS 易于閱讀和維護(hù)，排序時(shí)忽略帶有瀏覽器前綴的屬性。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

2.塊級(jí)內(nèi)容縮進(jìn):為了反映層級(jí)關(guān)系和提高可讀性，塊級(jí)內(nèi)容都應(yīng)縮進(jìn)。

    @media screen, projection {
      html {
        background: #fff;
        color: #444;
      }
    }

3.聲明結(jié)束:每行 CSS 都應(yīng)以分號(hào)結(jié)尾。

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

4.屬性名和值之間都應(yīng)有一個(gè)空格。

/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}

5.聲明樣式塊的分隔:在選擇器和 {} 之間用空格隔開(kāi)。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}

6.每個(gè)選擇器都另起一行。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

7.規(guī)則之間都用空行隔開(kāi)。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

8.屬性選擇器和屬性值用單引號(hào)，URI 的值不需要引號(hào)。

/* Not recommended */
@import url("http://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: "open sans", arial, sans-serif;
}

9.不適用css expression，不使用復(fù)雜濾鏡，盡量不設(shè)置容器的高度，保持容器高度可自適應(yīng)。除某些并排的塊需要高度等齊之外。height:100%;或height:1%;可能會(huì)遇到兼容性問(wèn)題。
9.值為 0 時(shí)不用添加單位。

    margin: 0;
    padding: 0;

10.值在 -1 和 1 之間時(shí)，不需要加 0。

    font-size: .8em;

11.16進(jìn)制表示法

    /* Not recommended */
    color: #eebbcc;
    /* Recommended */
    color: #ebc;

1.分段注釋：用注釋把 CSS 分成各個(gè)部分。

    /* Header */
    #adw-header {}
    /* Footer */
    #adw-footer {}
    /* Gallery */
    .adw-gallery {}

瀏覽器對(duì)選擇器讀取的順序是從右到左進(jìn)行。選擇器的最右邊部分被稱為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何。所以越具體的關(guān)鍵選擇器，其性能越高。如果給選擇器的效率排序，從高到低依次是：

id 選擇器（#id）

類選擇器（.class）

標(biāo)簽選擇器（p）

相鄰選擇器（h1 + p）

?選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover, li:nth-child）
基于此原則，以下給出具體的樣式優(yōu)化指南:

1.用于CSS的選擇器應(yīng)盡量具體，避免效率低下的普遍規(guī)則，并保證盡可能應(yīng)用到所有需要應(yīng)用的元素又不能影響無(wú)關(guān)的現(xiàn)有元素或后加的元素

2.選擇器不能過(guò)于依賴HTML結(jié)構(gòu)，當(dāng)其中一個(gè)模塊的結(jié)構(gòu)變換順序或加入一個(gè)新功能時(shí)，不要影響到已有的樣式。

3.CSS3的各種屬性和位置選擇器雖然方便，但是匹配性能很低，而且過(guò)于依賴HTML結(jié)構(gòu)，盡量少用，應(yīng)用類名代替

4.不要在類名或ID名前面加上標(biāo)簽名或類名，否則會(huì)使選擇器效率變低。

5.如果確信HTML結(jié)構(gòu)比較固定，且選擇器之間是父子關(guān)系，在不考慮低版本IE瀏覽器情況下可以加 > (子元素選擇器)

6.在CSS規(guī)則中盡可能使用較少層級(jí)的后代選擇器，最好不要超過(guò)三層，因?yàn)閷蛹?jí)越多匹配越慢，并且越依賴HTML結(jié)構(gòu)。有些層級(jí)的選擇器完全沒(méi)有必要，如ul li，一般可省去前面的ul。

7.SCSS層級(jí)書寫方式不是為了讓你更方便的嵌套層級(jí)，而是為了更方便的使用父級(jí)命名空間。

8.CSS應(yīng)該以模塊化開(kāi)發(fā)為主，尤其一個(gè)獨(dú)立功能的組件，同一功能和模板的樣式應(yīng)寫在一起，并繼承同一父選擇器，創(chuàng)造一個(gè)良好的命名空間，以便于此功能模塊的代碼拿出來(lái)可以獨(dú)立使用

.panel{}
.panel-header{}
.panel-body{}
.panel-footer{}

9.雖然每個(gè)選擇器的各種樣式可以層疊，但是加樣式時(shí)必須要考慮盡可能的少影響到已有樣式， 盡量?各標(biāo)簽的默認(rèn)樣式，也不要重置并不存在的樣式，使得重?性很差。舉個(gè)簡(jiǎn)單的例?， h1-h6 默認(rèn)的加粗樣式不要?樣式去除，以免下次要?時(shí)再?加粗樣式覆蓋回來(lái)。

10.可以借助原本的繼承關(guān)系來(lái)少加樣式，當(dāng)需要重寫樣式時(shí)，?選擇器的權(quán)重關(guān)系覆蓋?不要 ?!important。

11.盡量不要使?!important打亂原有CSS繼承關(guān)系，除?此樣式功能單?并且你確信此樣式不會(huì)被其它樣式應(yīng)?，更多時(shí)候需要合理使?選擇器的權(quán)重以避免不希望有的樣式覆蓋。更多權(quán)重??的?章可以參考http://www.w3cplus.com/css/cs...

12.如果你想展現(xiàn)不同狀態(tài)的鏈接樣式，?定要記住 link-visited-hover-active 的順序，或者簡(jiǎn)寫為 LVHA

CSS 不要直接拿 div 標(biāo)簽當(dāng)做選擇器寫樣式，應(yīng)該為其加類名。因?yàn)?div 屬于?任何特殊意義 的標(biāo)簽，使?范圍特別?，所以應(yīng)特別注意對(duì) div 應(yīng)?樣式。

14.不要寫?不到的樣式，應(yīng)定期排查樣式表中的樣式，以免樣式表越來(lái)越臃腫。

15.雖然 ID 選擇器效率最?，但是建議在樣式表中不? ID 作為選擇器，因?yàn)槠錂?quán)重很?，應(yīng)留給?戶去使?，以及更多的留給 JS 接口。

16.對(duì)于需要同時(shí)改變狀態(tài)的?組元素，不要為每?個(gè)元素加樣式，?是應(yīng)該在?元素上加樣式類統(tǒng)?處理。

 .parent-class .a.active {} 
 .parent-class .b.active {} 
 .parent-class .c.active {} 
 應(yīng)改為：
 .parent-class.active .a {} 
 .parent-class.active .b {} 
 .parent-class.active .c {} 

17.任何時(shí)候不要? html 和 body 選擇器作為?選擇器，除??于 IE6 和 IE7 瀏覽器的 css hack。

1.檢查 CSS 是否正確

檢查?下有?拼寫錯(cuò)誤、是否忘記結(jié)尾的 } 等。可以利? CleanCSS 來(lái)檢查 CSS 的拼寫錯(cuò)誤。 CleanCSS 本是為 CSS 減肥的?具，但也能檢查出拼寫錯(cuò)誤。

2.利? border 屬性確定出錯(cuò)元素的布局特性

使? float 或 position 屬性布局?不??就會(huì)出錯(cuò)。這時(shí)為元素添加 border 屬性確定元素邊界 或添加 background 屬性，錯(cuò)誤原因即?落?出。

3.利?各種虛擬機(jī)平臺(tái)測(cè)試各 IE 版本中的效果

4.利?第三?測(cè)試?具或?yàn)g覽器?帶的調(diào)試?具調(diào)試

IE6、IE7 可以安裝 IE developetoolbar V2/IE webdeveloper。Microsoft 有 script Editor，IE8+ 已經(jīng)?帶開(kāi)發(fā)者?具，并且?版本的瀏覽器中可以模擬出低? IE7 的效果。FF 上有著名的 Firebug， 以及 chrome 和 safari ?帶的開(kāi)發(fā)者?具