css - SMACSS、语义类名和嵌套元素

Question

我刚读过 Scalable and Modular Architecture for CSS这让我开始思考一些事情。 Snook 的两个原则是:

1. 增加一段 HTML 和内容的语义值(value)
2. 降低对特定 HTML 结构的期望

因此这意味着使用语义类名而不是依赖非语义元素类型来定位。例如，我可能不是以 .someClass-title 为目标，而是以 .someClass-title 为目标，这样如果 h5 被换成其他东西，事情就不会中断。

就我个人而言，我发现在元素的名称中编码元素的层次结构有点令人不快(即使它在语义上是正确的)。我更喜欢做 .someClass .title。但是要使用像标题一样通用的类，您需要接受此类将在许多不同的上下文中使用。

如果我知道同一个类将被选择器中的前一个元素命名空间，那么在完全不同的上下文中使用同一个类会有什么问题吗？

例如，假设我的站点中有三个不同的位置，其中一类“标题”是有意义的:

HTML

<header class="pageHeader">
   <h1 class="title">Some Title</h1>
</header>

...

<article class="leadArticle>
   <h3 class="title">Some Article Title</h3>
</article>

...

<ul class="productPreviews">
   <li class="product">
      <h5 class="title">Some Product Name</h5>
   </li>
</ul>

CSS

.pageHeader .title
{

}

.leadArticle .title
{

}

.productPreview .product .title
{

}

编辑:作为 Alohci他在下面的回答中提到， header 标签并非没有语义，所以这可能不是最好的使用示例。

显然，在这些上下文中，我可能会做一些与 title 完全不同的事情，但是 title 对于它的模块命名空间来说是绝对有意义的，而且我从来没有任何打算将 title 用作通用选择器。

这似乎符合所有条件。它语义丰富，与实现完全分离。例如，如果将最后一个示例更改为一个 ol 或一堆 div，则不会破坏任何内容，如果标题被包裹在一个 div 中，它仍然会被定位。

这对我来说很有意义，但我还没有看到这种方法被广泛使用，我想知道为什么。一个明显的缺点是您在选择器中链接类，但我认为这比为每个类名命名空间更可取。

Answer 1

我更喜欢使用像 .title 这样的类，而不是只选择 h5 元素，因为我觉得它进一步将 HTML 与 CSS 分离。如果出于某种原因，您决定 h4 或 h6 更适合文档大纲，或其他一些元素/原因，则如果您选择元素 (h5) 与选择类 (.标题)。

这就是为什么我更喜欢将 ALL THE THINGS 与元素选择器进行分类，因为标记可能会随着时间而改变。如果您在一个较小的网站上工作，没有看到很多更新，这可能不是一个问题，尽管了解这一点是件好事。

至于在完全不同的上下文中使用同一个类是否有任何问题，如果你知道它会被选择器中的前一个元素命名空间，我对此有不同的看法。

一方面，我想到了一些问题，例如，如果没有父选择器，.title 的用途/含义/作用可能是空的。 (.pageHeader .title) 虽然我认为 .title 是一个非常好的类名，但其他开发人员可能很难理解它的含义来自父选择器，例如 .pageHeader .title

另一个问题是，如果您将 .title 类用于模块中“标题”的多个实例，则可能会遇到问题。基本思想是，如果试图在模块中扩展 .title 的可重用性，则提供的本地作用域后代选择器有时会过于严格。我设置了一个代码演示来展示我在说什么 here .

另一方面，后代选择器是最常用的选择器之一，特别是为了它们的作用域目的。

Tim Murtaugh，他是 A List Apart 的开发人员之一(不确定他是否是首席开发人员)他的大部分 styles 使用后代选择器在他的个人网站上。

我最近一直在探索这个和 BEM，并且同意你的结论，“这比命名每个类名更可取。”

与 .pageHeader__title{...} 相比，我更喜欢 .pageHeader .title{...} 但在某些情况下，一种方法在某种情况下可能比另一种方法更有利。

与大多数事情一样，这取决于情况，但我认为如果您不让嵌套太深并且考虑如何使用它们，后代选择器是提供局部范围样式的强大且好的解决方案，同时还提供全局范围样式的解决方案。

例如:

/* Globally scoped styles for all .title(s) */
.title{
   font-family: serif;
   font-weight: bold;
}

/* Locally scoped styles for individual .title(s) */
.pageHeader .title {
    color: #f00;
}

.leadArticle .title {
    color: #00f;
}

.productPreview .product .title {
   color: #0f0;
}