CSS编写规范的相关建议

互联网
人生不过三万天，成功失败均坦然，是非恩怨莫在意，健康快乐最值钱。你的爱好就是你的方向，你的兴趣就是你的资本。

避免过度约束

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

CSS Code复制内容到剪贴板
  1. //糟糕
  2. ul#someid{..}
  3. .menu#otherid{..}
  5. //好的
  6. #someid{..}
  7. #otherid{..}

后代选择符最烂

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

CSS Code复制内容到剪贴板
  1. //烂透了
  2. htmldivtrtd{..}

尽可能使用复合语法

CSS Code复制内容到剪贴板
  1. //糟糕
  2. .someclass{
  3. padding-top:20px;
  4. padding-bottom:20px;
  5. padding-left:10px;
  6. padding-right:10px;
  7. background:#000;
  8. background-image:url(../imgs/carrot.png);
  9. background-position:bottombottom;
  10. background-repeat:repeat-x;
  11. }
  13. //好的
  14. .someclass{
  15. padding:20px10px20px10px;
  16. background:#000url(../imgs/carrot.png)repeat-xbottombottom;
  17. }

避免不必要的重复

CSS Code复制内容到剪贴板
  1. //糟糕
  2. .someclass{
  3. color:red;
  4. background:blue;
  5. font-size:15px;
  6. }
  8. .otherclass{
  9. color:red;
  10. background:blue;
  11. font-size:15px;
  12. }
  14. //好的
  15. .someclass,.otherclass{
  16. color:red;
  17. background:blue;
  18. font-size:15px;
  19. }

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

CSS Code复制内容到剪贴板
  1. //糟糕
  2. .someclass-a,.someclass-b,.someclass-c,.someclass-d{
  3. ...
  4. }
  6. //好的
  7. .someclass-a,
  8. .someclass-b,
  9. .someclass-c,
  10. .someclass-d{
  11. ...
  12. }
  14. //好的做法
  15. .someclass{
  16. background-image:
  17. linear-gradient(#000,#ccc),
  18. linear-gradient(#ccc,#ddd);
  19. box-shadow:
  20. 2px2px2px#000,
  21. 1px4px1px1px#dddinset;
  22. }

到此这篇关于CSS编写规范的相关建议就介绍到这了。每天早上醒来，你荷包里的最大资产是24个小时——你生命宇宙中尚未制造的材料。更多相关CSS编写规范的相关建议内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题