摘要：使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。聲明結束每行都應以分號結尾。排查法檢查是否正確檢查下有拼寫錯誤是否忘記結尾的等。可以利來檢查的拼寫錯誤。本是為減肥的具，但也能檢查出拼寫錯誤。

1.id 和 class 的命名總規則為：內容優先，表現為輔。?先根據內容來命名，?如 main-nav。如 果根據內容找不到合適的命名，可以再結合表現來定，?如 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.應該盡量簡短，同時要容易理解。

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

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

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

5.盡量使用 CSS 中可以簡寫的屬性 (如 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.使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。

    .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使?下劃線進?連接，如 product_title。class使?連字符進?連接，如 product-lists。這樣容易區分，同時對腳本 調試有幫助。

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

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

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.塊級內容縮進:為了反映層級關系和提高可讀性，塊級內容都應縮進。

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

3.聲明結束:每行 CSS 都應以分號結尾。

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

4.屬性名和值之間都應有一個空格。

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

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

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

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

6.每個選擇器都另起一行。

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

7.規則之間都用空行隔開。

html {
  background: #fff;
}

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

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

/* 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，不使用復雜濾鏡，盡量不設置容器的高度，保持容器高度可自適應。除某些并排的塊需要高度等齊之外。height:100%;或height:1%;可能會遇到兼容性問題。
9.值為 0 時不用添加單位。

    margin: 0;
    padding: 0;

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

    font-size: .8em;

11.16進制表示法

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

1.分段注釋：用注釋把 CSS 分成各個部分。

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

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

id 選擇器（#id）

類選擇器（.class）

標簽選擇器（p）

相鄰選擇器（h1 + p）

?選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（*）

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

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

1.用于CSS的選擇器應盡量具體，避免效率低下的普遍規則，并保證盡可能應用到所有需要應用的元素又不能影響無關的現有元素或后加的元素

2.選擇器不能過于依賴HTML結構，當其中一個模塊的結構變換順序或加入一個新功能時，不要影響到已有的樣式。

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

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

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

6.在CSS規則中盡可能使用較少層級的后代選擇器，最好不要超過三層，因為層級越多匹配越慢，并且越依賴HTML結構。有些層級的選擇器完全沒有必要，如ul li，一般可省去前面的ul。

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

8.CSS應該以模塊化開發為主，尤其一個獨立功能的組件，同一功能和模板的樣式應寫在一起，并繼承同一父選擇器，創造一個良好的命名空間，以便于此功能模塊的代碼拿出來可以獨立使用

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

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

10.可以借助原本的繼承關系來少加樣式，當需要重寫樣式時，?選擇器的權重關系覆蓋?不要 ?!important。

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

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

CSS 不要直接拿 div 標簽當做選擇器寫樣式，應該為其加類名。因為 div 屬于?任何特殊意義 的標簽，使?范圍特別?，所以應特別注意對 div 應?樣式。

14.不要寫?不到的樣式，應定期排查樣式表中的樣式，以免樣式表越來越臃腫。

15.雖然 ID 選擇器效率最?，但是建議在樣式表中不? ID 作為選擇器，因為其權重很?，應留給?戶去使?，以及更多的留給 JS 接口。

16.對于需要同時改變狀態的?組元素，不要為每?個元素加樣式，?是應該在?元素上加樣式類統?處理。

 .parent-class .a.active {} 
 .parent-class .b.active {} 
 .parent-class .c.active {} 
 應改為：
 .parent-class.active .a {} 
 .parent-class.active .b {} 
 .parent-class.active .c {} 

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

1.檢查 CSS 是否正確

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

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

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

3.利?各種虛擬機平臺測試各 IE 版本中的效果

4.利?第三?測試?具或瀏覽器?帶的調試?具調試

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