這篇文章主要介紹了CSS樣式書(shū)寫(xiě)順序和命名規(guī)范及注意事項(xiàng)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有昌江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

書(shū)寫(xiě)順序的意義

減少瀏覽器reflow（回流），提升瀏覽器渲染dom的性能

①:解析html構(gòu)建dom樹(shù)，解析css構(gòu)建css樹(shù)：將html解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，將css解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)

②:構(gòu)建render樹(shù)：DOM樹(shù)和CSS樹(shù)合并之后形成的render樹(shù)。

③:布局render樹(shù)：有了render樹(shù)，瀏覽器已經(jīng)知道那些網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的css定義和以及它們的從屬關(guān)系，從而計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

④:繪制render樹(shù)：按照計(jì)算出來(lái)的規(guī)則，通過(guò)顯卡把內(nèi)容畫(huà)在屏幕上。

css樣式解析到顯示至瀏覽器屏幕上就發(fā)生在②③④步驟，可見(jiàn)瀏覽器并不是一獲取到css樣式就立馬開(kāi)始解析而是根據(jù)css樣式的書(shū)寫(xiě)順序?qū)⒅凑誨om樹(shù)的結(jié)構(gòu)分布render樣式，完成第②步，然后開(kāi)始遍歷每個(gè)樹(shù)結(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的書(shū)寫(xiě)順序。

優(yōu)先級(jí)第一--定位屬性：

{
      display         規(guī)定元素應(yīng)該生成的框的類(lèi)型。
      position        定位規(guī)定元素的定位類(lèi)型。
      float           規(guī)定框是否應(yīng)該浮動(dòng)。
      left     
      top  
      right  
      bottom   
      overflow        規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
      clear           清除
      z-index         設(shè)置元素的堆疊順序。
      content         內(nèi)容
          list-style  
          visibility  可見(jiàn)性/顯示
 }

優(yōu)先級(jí)第二--自身屬性：

{
     width
     height
     border
     padding    
     margin   
     background
}

優(yōu)先級(jí)第三--文字樣式：

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

優(yōu)先級(jí)第四--文本屬性：

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

優(yōu)先級(jí)第五--CC3中新增屬性：

{  
         box-shadow        向方框添加一個(gè)或多個(gè)陰影。
         cursor            規(guī)定要顯示的光標(biāo)的類(lèi)型（形狀）。
         border-radius  
         background:linear-gradient
         transform……       向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
   }

CSS代碼的命名規(guī)范

• 必須以字母開(kāi)頭命名選擇器，這樣可保證在所有瀏覽器下都能兼容；

• 不允許單個(gè)字母的類(lèi)選擇器出現(xiàn)；

• 不允許命名帶有廣告等英文的單詞，例如ad,adv,adver,advertising，已防止該模塊被瀏覽器當(dāng)成垃圾廣告過(guò)濾掉。任何文件的命名均如此。

• 下劃線 ’ _ ’ 禁止出現(xiàn)在class命名中，全小寫(xiě),統(tǒng)一使用’-‘連字符.

• 禁止駝峰命名 className

• 見(jiàn)名知意

CSS代碼注意事項(xiàng)

• 不要以完全沒(méi)有語(yǔ)義的標(biāo)簽作為選擇器,這會(huì)造成大面積污染

• 簡(jiǎn)寫(xiě)CSS顏色屬性值

• 刪除CSS屬性值為0的單位

• 刪除無(wú)用CSS樣式

• 為單個(gè)CSS選擇器或新申明開(kāi)啟新行

• 避免過(guò)度簡(jiǎn)寫(xiě) , .ico足夠表示這是一個(gè)圖標(biāo) , 而.i不代表任何意思

• 使用有意義的名稱，使用結(jié)構(gòu)化或者作用目標(biāo)相關(guān)的，而不是抽象的名稱

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS樣式書(shū)寫(xiě)順序和命名規(guī)范及注意事項(xiàng)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!