1.id规则
2类规则
三.标签规则
4。一般规则
效率的共同的认识是从史提夫Souders的2009期高性能网站
这篇文章我想分享一些简单的例子，引导我在写作中使用高效的CSS。这些都是由高效的CSS指南写的MDN和遵循类似的格式。

1。避免过多的约束

一般规则，不要添加不必要的约束。
复制代码代码如下所示：

UL # someid {等}
# otherid {，}。

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


二，最坏的后代选择器

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


三。避免链式（交叉）选择器

这与过度约束的情况类似，只需创建一个新的CSS类选择器就更为合理。
复制代码代码如下所示：

menu.left.icon {等}。

/好的
菜单左图标{ }


四。坚持接吻原则

假设我们有以下DOM：
复制代码代码如下所示：

推特
脸谱网
Dribbble



下面是相应的规则…
复制代码代码如下所示：

#导航仪李{，}

/好的
#导航{，}


五。使用复合（紧凑）语法

尽可能使用复合语法。
复制代码代码如下所示：

{。someclass
20px垫上；
座垫：20px；
左：10px填充；
填充右：10px；
背景：# 000；
背景图像：URL（。 / /胡萝卜IMGs。PNG）；
背景位置：底部；
背景：repeat-x重复；
}

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


六，避免不必要的名称空间

复制代码代码如下所示：

。someclass表tr.otherclass td.somerule {等}

/好的
someclass.otherclass td.somerule {等}。


七，避免不必要的重复。

尽可能多地重复规则。
复制代码代码如下所示：


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

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

/好的

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

八。尽可能地减少规则
在上述规则的基础上，您可以进一步合并不同类别中的重复规则。
复制代码代码如下所示：

{。someclass
颜色：红色；
背景：蓝色；
身高：150px；
宽度：150px；
字体大小：16px；
}

{。OtherClass
颜色：红色；
背景：蓝色；
身高：150px；
宽度：150px；
字体大小：8px；
}

/好的
。someclass，Otherclass {。
颜色：红色；
背景：蓝色；
身高：150px；
宽度：150px；
}

{。someclass
字体大小：16px；
}

{。OtherClass
字体大小：8px；
}

九。避免未定义的命名约定
最好使用表示语义的名称。一个好的CSS类名应该描述它是什么，而不是它看起来像什么。
十，避免！重要
事实上，您还应该能够使用其他高质量的选择器。

十一。遵循标准的声明顺序

虽然有一些常用的方法来安排CSS属性的顺序，下面是我所遵循的流行方式。
复制代码代码如下所示：
{。someclass
定位
显示框模型
背景和排版样式
转换
其他
}
十二。组织良好的代码格式
代码的可读性与可维护性成正比。
复制代码代码如下所示：

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


显然，只有很少的规则，我一直在走自己的CSS，在更高效、更可持续的方式。如果你想了解更多的知识，我建议阅读高效的CSS和谷歌优化浏览器渲染引导MDN。