css - 使用 css 语法或自定义类

Question

有点菜鸟，所以需要一些现实世界的建议。

我刚刚阅读了一篇由 mozilla 撰写的关于 css 选择器的使用的文章。

基本上，他们说不要使用复杂的选择器树，例如:

.class-a .class-b > .class-c is better expressed as  custom-class-abc

显然他们会这样做，因为第二个选项对于浏览器的性能会更好，但如果这是最好的解决方案，那么它就会使很多 css 基础知识变得多余。

我有一个包含 LI 的 UL，其中包含 A。我的第一个 A 需要区别对待，所以我使用以下语法:

#footer li:first-child a {}

如果我要遵循 Mozilla 的最佳实践，这将是:

#footer a.first or #footer .first (after adding a class to the first A element)

有足够的东西可以学习，所以希望能就这一切如何在现实世界中运作提供一些建议。

Answer 1

您的选择器很好。没有读过你提到的文章，我猜他们的意思是避免类似的事情

html body div.wrapper div.navigation ul.nav li:first-child a.item { }

然后就去做

.nav li:first-child a.item

这article详细说明了为什么选择器越少性能越好。当然，凡事都有极端，mozilla 应该建议如何使事情尽可能快，但选择器已经非常快，所以在大多数情况下它没有区别。

在相关说明中，阅读有关 specificity in css 的文章也可以帮助您确定实际需要选择多少。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/