CSS編寫規(guī)范的建議有哪些

CSS編寫規(guī)范的建議有哪些，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

避免過度約束

作為一般規(guī)則，不添加不必要的約束。

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

1. // 糟糕   
   ul#someid {..}   
   .menu#otherid{..}   
     
   // 好的   
   #someid {..}   
   #otherid {..}

后代選擇符最爛

不僅性能低下而且代碼很脆弱，html代碼和css代碼嚴(yán)重耦合，html代碼結(jié)構(gòu)發(fā)生變化時(shí)，CSS也得修改，這是多么糟糕，特別是在大公司里，寫html和css的往往不是同一個(gè)人。

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

1. // 爛透了   
   html div tr td {..}

盡可能使用復(fù)合語法

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

1. // 糟糕   
   .someclass {   
   padding-top: 20px;   
   padding-bottom: 20px;   
   padding-left: 10px;   
   padding-right: 10px;   
   background: #000;   
   background-image: url(../imgs/carrot.png);   
   background-position: bottombottom;   
   background-repeat: repeat-x;   
   }   
     
   // 好的   
   .someclass {   
   padding: 20px 10px 20px 10px;   
   background: #000 url(../imgs/carrot.png) repeat-x bottombottom;   
   }

避免不必要的重復(fù)

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

1. // 糟糕   
   .someclass {   
   color: red;   
   background: blue;   
   font-size: 15px;   
   }   
     
   .otherclass {   
   color: red;   
   background: blue;   
   font-size: 15px;   
   }   
     
   // 好的   
   .someclass, .otherclass {   
   color: red;   
   background: blue;   
   font-size: 15px;   
   }  
   組織好的代碼格式
   代碼的易讀性和易維護(hù)性成正比。下面是我遵循的格式化方法。
   CSS Code復(fù)制內(nèi)容到剪貼板
   // 糟糕   
   .someclass-a, .someclass-b, .someclass-c, .someclass-d {   
   ...   
   }   
     
   // 好的   
   .someclass-a,   
   .someclass-b,   
   .someclass-c,   
   .someclass-d {   
   ...   
   }   
     
   // 好的做法   
   .someclass {   
       background-image:   
           linear-gradient(#000, #ccc),   
           linear-gradient(#ccc, #ddd);   
       box-shadow:   
           2px 2px 2px #000,   
           1px 4px 1px 1px #ddd inset;   
   }

關(guān)于CSS編寫規(guī)范的建議有哪些問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。