CSS编写规范的相关建议

本文主要介绍了CSS代码的相关建议。编码倾向有助于以后的调试工作，您需要的朋友可以参考它。
避免过多的约束

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

CSS代码将内容复制到剪贴板。
UL # someid {等}
# otherid {，}。

/好的
# someid {等}
# otherid {等}

最差的后代选择器

不仅性能低，而且代码非常脆弱，HTML代码和CSS代码是严重耦合的，当CSS代码结构发生变化时，CSS必须进行修改。它有多糟糕，尤其是在大公司里，HTML和CSS往往不是同一个人。

CSS代码将内容复制到剪贴板。
/腐烂
html…

尽可能使用复合语法

CSS代码将内容复制到剪贴板。
{。someclass
20px垫上；
座垫：20px；
左：10px填充；
填充右：10px；
背景：# 000；
背景图像：URL（。 / /胡萝卜IMGs。PNG）；
背景位置：bottombottom；
背景：repeat-x重复；
}

/好的
{。someclass
填料：20px 10px 20px 10px；
背景：# 000网址（。 / /胡萝卜IMGs。PNG）repeat-x bottombottom；
}

避免不必要的重复

CSS代码将内容复制到剪贴板。
{。someclass
颜色：红色；
背景：蓝色；
字体大小：15px；
}

{。OtherClass
颜色：红色；
背景：蓝色；
字体大小：15px；
}

/好的
。someclass，Otherclass {。
颜色：红色；
背景：蓝色；
字体大小：15px；
}

组织良好的代码格式

代码的可读性与可维护性成正比。

CSS代码将内容复制到剪贴板。
someclass-a someclass-b。，。，。someclass-c，someclass-d {。
…
}

/好的
someclass-a，
someclass-b，
someclass-c，
{。someclass-d
…
}

好的练习
{。someclass
背景图像：
线性梯度（# 000，# CCC），
线性梯度（# CCC，# DDD）；
盒子的影子：
2px 2px 2px # 000，
插图1px 4px 1px 1px # DDD；
}