CSS編寫規范的建議有哪些

CSS編寫規范的建議有哪些，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

避免過度約束

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

CSS Code復制內容到剪貼板

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

后代選擇符最爛

不僅性能低下而且代碼很脆弱，html代碼和css代碼嚴重耦合，html代碼結構發生變化時，CSS也得修改，這是多么糟糕，特別是在大公司里，寫html和css的往往不是同一個人。

CSS Code復制內容到剪貼板

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

盡可能使用復合語法

CSS Code復制內容到剪貼板

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;   
   }

避免不必要的重復

CSS Code復制內容到剪貼板

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;   
   }  
   組織好的代碼格式
   代碼的易讀性和易維護性成正比。下面是我遵循的格式化方法。
   CSS Code復制內容到剪貼板
   // 糟糕   
   .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;   
   }

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