CSS编写规范的相关建议
2021-05-08 21:10:40 避免过度约束
作为一般规则,不添加不必要的约束。
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邮箱联系删除。