CSS 中哪个是更好的实践——多个位置的单个通用选择器或多个特定选择器？答案

【问题标题】：Which is better practice in CSS - single generic selector in multiple locations or multiple specific selectors?CSS 中哪个是更好的实践——多个位置的单个通用选择器或多个特定选择器？
【发布时间】：2010-08-01 15:26:13
【问题描述】：

哪种做法更好？

.listing { some attributes:some values;}

应用于多个位置（例如搜索结果、类别列表）

或

.search-list,
.category-list,
.other-list { some attributes:some values;}

在我看来，第二个选项提供在不更改 (x)html 的情况下对样式的未来更改具有更大的灵活性，并且由于确切知道规则的应用位置而更易于维护，但需要更多带宽来下载和浏览器处理能力来解析。

对你的想法感兴趣。

谢谢，乔纳森

【问题讨论】：

标签： css css-selectors

【解决方案1】：

使用上下文，如使用子选择器实现的那样（根据您在下面的评论进行修改）。这清楚地表明了哪些属性是通用列表的一部分，哪些属性是特定于搜索列表的。

.list li { default attributes: default values }
#search-list li { attributes specific to search listings: some values; }

with markup

<ul id="search-list" class="list">
  <li>...

我最近一直在与一些顶级设计师合作。他们对具有“div-itis”或“class-itis”的标记持否定态度（他们会跳过上面的列表类和样式 ul）。为了解决这个问题，他们在内部使用 id 和原生标签，如 li、h5 等。由于清除默认值是一个 PITA，因此它们只定义了几个默认值，其余部分使用上下文选择器。他们在需要时使用多个类名。他们也倾向于使用罗盘或更少，因为这些环境允许上下文选择器和混合。

【讨论】：

我喜欢使用语义正确的通用元素并将通用和特定与覆盖结合起来的方法，我对您的示例的关注是添加带有额外 div 的额外标记。 <ul id="search-list"> 怎么样？
@Jonathan：这样更好。正是我注意到设计师的所作所为。它们确实将 div 限制为语义上正确的用途 - 识别逻辑分组的页面部分。我正在努力改掉这个习惯，然后又回到了它！

【解决方案2】：

你可以添加

.elephant-list,
.aardvark-list,
.platypus-list,

也期待未来的扩张，但是当你从灵活到荒谬时，就会出现一个点。没有理由为您没有理由期望需要不同的类编码特殊名称。

如果你以后发现它们需要不同，添加它们。同样从美学的角度来看，.listing 部门共享相同的样式是一件好事。

【讨论】：

完全同意让所有“列表”看起来都一样，因此将它们与一个共同的样式链接在一起。我不建议为此添加虚构的列表类型，但如果我知道当前存在三种列表类型（搜索、类别、其他），那么专门选择它们并设置常见的风格？
它可能会给你的造型师一些改变的想法，这些想法可能不应该没有令人信服的理由；它隐藏了不同名称背后的真正共性，这将导致未来的读者（包括您）不得不回忆 X 和 Y 实际上是等价的。它为开始时结构非常糟糕的代码增加了词汇复杂性。我不认为这是致命的，只是不可取。