CSS樣式書寫順序和命名規範

書寫順序的意義

減小瀏覽器reflow（迴流），提高瀏覽器渲染dom的性能

①:解析html構建dom樹，解析css構建css樹：將html解析成樹形的數據結構，將css解析成樹形的數據結構

②:構建render樹：DOM樹和CSS樹合併以後造成的render樹。

③:佈局render樹：有了render樹，瀏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關係，從而計算出每一個節點在屏幕中的位置。

④:繪製render樹：按照計算出來的規則，經過顯卡把內容畫在屏幕上。

css樣式解析到顯示至瀏覽器屏幕上就發生在②③④步驟，可見瀏覽器並非一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分佈render樣式，完成第②步，而後開始遍歷每一個樹結點的css樣式進行解析，此時的css樣式的遍歷順序徹底是按照以前的書寫順序。

優先級第一--定位屬性：

{
      display         規定元素應該生成的框的類型。
      position        定位規定元素的定位類型。
      float           規定框是否應該浮動。
      left     
      top  
      right  
      bottom   
      overflow        規定當內容溢出元素框時發生的事情。
      clear           清除
      z-index         設置元素的堆疊順序。
      content         內容
          list-style  
          visibility  可見性/顯示
 }

優先級第二--自身屬性：

{
     width
     height
     border
     padding    
     margin   
     background
}

優先級第三--文字樣式：

{
        font-family   
        font-size   
        font-style     規定文本的字體樣式。
        font-weight   
        font-varient   規定是否以小型大寫字母的字體顯示文本
        color   
   }

優先級第四--文本屬性：

{
        text-align         規定文本的水平對齊方式。
        vertical-align     設置元素的垂直對齊方式。
        text-wrap          規定文本的換行規則。
        text-transform     控制文本的大小寫。
        text-indent        規定文本塊首行的縮進。
        text-decoration    規定添加到文本的裝飾效果。
        letter-spacing     設置字符間距。
        word-spacing       設置單詞間距。
        white-space        規定如何處理元素中的空白。
        text-overflow      規定當文本溢出包含元素時發生的事情。
   }

優先級第五--CC3中新增屬性：

{  
         box-shadow        向方框添加一個或多個陰影。
         cursor            規定要顯示的光標的類型（形狀）。
         border-radius  
         background:linear-gradient
         transform……       向元素應用 2D 或 3D 轉換。
   }

CSS代碼的命名規範

• 必須以字母開頭命名選擇器，這樣可保證在全部瀏覽器下都能兼容；
• 不容許單個字母的類選擇器出現；
• 不容許命名帶有廣告等英文的單詞，例如ad,adv,adver,advertising，已防止該模塊被瀏覽器當成垃圾廣告過濾掉。任何文件的命名均如此。
• 下劃線 ’ _ ’ 禁止出如今class命名中，全小寫,統一使用’-‘連字符.
• 禁止駝峯命名 className
• 見名知意

CSS代碼注意事項

1. 不要以徹底沒有語義的標籤做爲選擇器,這會形成大面積污染
2. 簡寫CSS顏色屬性值
3. 刪除CSS屬性值爲0的單位
4. 刪除無用CSS樣式
5. 爲單個CSS選擇器或新申明開啓新行
6. 避免過分簡寫 , .ico足夠表示這是一個圖標 , 而.i不表明任何意思
7. 使用有意義的名稱，使用結構化或者做用目標相關的，而不是抽象的名稱