哪种更好的CSS实践 - 多个位置的单一通用选择器或多个特定选择器？

Question

哪种做法更好？

.listing { some attributes:some values;}

适用于多个地点（例如搜索结果，类别列表）

或

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

在我看来，第二个选项提供了 更改样式的灵活性，无需更改（x）html，并且由于准确了解规则的应用位置而更易于维护，但需要更多带宽下载和浏览器处理能力来解析。

对你的想法感兴趣。

谢谢， 乔纳森

Answer 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）。为了解决这个问题，他们使用了ids和本地标签，如 li ， h5 等。由于它是用于清除默认值的PITA，因此它们仅定义几个默认值并使用上下文选择器。他们在需要时使用多个类名。他们也倾向于使用罗盘或更少，因为这些环境允许上下文选择器和混合。

Answer 2

你可以添加

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

也期待着未来的扩张，但是当你从灵活变为荒谬时，有一个点。没有理由为您没有理由期望需要区别的类编写特殊名称。

如果您发现他们将来需要有所不同，请添加它们。同样从具有.listing分区的美学观点来看，共享相同的风格是一件好事。