CSS编写规范的建议有哪些

CSS编写规范的建议有哪些，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

避免过度约束

作为一般规则，不添加不必要的约束。

CSS Code复制内容到剪贴板

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

   AI代码助手复制代码

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

CSS Code复制内容到剪贴板

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

   AI代码助手复制代码

尽可能使用复合语法

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

   AI代码助手复制代码

避免不必要的重复

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

   AI代码助手复制代码

关于CSS编写规范的建议有哪些问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>