有没有理由不使用单个非嵌套类名作为CSS选择器？

Question

如果我有一个容器和一个项目列表,我可能有以下HTML标记:

<div class="container food foodcontainer">
    <ul class="list foodlist">
        <li class="listitem fooditems"></li>
        ...

我可以用两种方式设置它们(假设使用纯CSS而不是/ sass或任何其他帮助器).首先,就像通常会做的那样:

.food { /* style */ }
.food .list { /* style */ }
.food .list .listitems { /* style */ }

或者,我可以通过详细的描述性类名简单地引用所有内容:

.foodcontainer { /* style */ }
.foodlist  { /* style */ }
.fooditems  { /* style */ }

没有更多的级联关系!是否有理由不为所有内容执行此操作(以便每个元素都由单个类/ id名称引用)？我(以及在相同代码库上工作的人)根本没有发现在可读性方面要好得多; 如果有的话,我们会发现更容易掌握的独特和直接名称,也更容易搜索.

有一篇古老的文章,通常建议更短,更独特的选择器,以提高性能; 在最近的更新中,据说整体性能已经发生了变化.但是好多少？更短的路还更快吗？

Answer 1

.food .list { /* style */ }仅定位具有 class 的元素内list具有class 的元素。food

.food > .list { /* style */ }仅针对list属于 class元素的直接子级的 class元素food。

.list { /* style */ }以任何具有 class 的元素为目标list，无论其父元素如何。

一般来说，如果您想确保仅针对特定元素中的一个元素，而不是可能具有相同类的任何其他元素，请根据您的需要使用上面的第一个或第二个。

当然，您也可以为它们提供独特的类，以避免链接它们，但在我看来，记住您已经在使用哪些类会带来不必要的麻烦。另外，我认为当您将它们链接起来而不是提出独特的类时，这有助于提高可读性 - 然后更容易看到这些规则适用于哪些元素。

我不会太担心其中任何一个的性能 - 除非你有大量的网站。

您可以在此处阅读有关 CSS 选择器的信息。