CSS编写规范的相关建议

时间：2021-05-08

避免过度约束

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

CSS Code复制内容到剪贴板
  • //糟糕
  • ul#someid{..}
  • .menu#otherid{..}
  • //好的
  • #someid{..}
  • #otherid{..}

    • 后代选择符最烂

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

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

    • 尽可能使用复合语法

    CSS Code复制内容到剪贴板
  • //糟糕
  • .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:20px10px20px10px;
  • background:#000url(../imgs/carrot.png)repeat-xbottombottom;
  • }

    • 避免不必要的重复

    CSS Code复制内容到剪贴板
  • //糟糕
  • .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:
  • 2px2px2px#000,
  • 1px4px1px1px#dddinset;
  • }

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章