html – SMACSS,语义类名称和嵌套元素

<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>

.pageHeader .title
{

}

.leadArticle .title
{

}

.productPreview .product .title
{

}

我更喜欢使用像.title这样的类,而不是只选择h5元素,因为我觉得它将HTML与CSS分离了一些.无论出于何种原因,如果你认为h4或h6更适合文档大纲或其他一些元素/原因,如果你选择元素(h5)而不是选择一个类,你将不得不重构你的CSS(.标题).

这就是为什么我更喜欢将所有事情与元素选择器分类,因为标记可能会随着时间的推移而改变.如果您在一个没有看到很多更新的小型网站上工作,这可能不是一个问题,尽管知道这一点很好.

如果在完全不同的上下文中使用同一个类有任何问题,如果你知道它将被选择器中的前一个项命名,那么我对它有不同的想法.

一方面,我会想到一些问题,例如.title的使用/含义/角色可能是空的,没有它的父选择器. (.pageHeader .title)虽然我认为.title是一个非常精细的类名,但是其他开发者可能很难理解它的意思来自像.pageHeader这样的父选择器.title

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

另一方面,后代选择器是最常用的选择器之一,专门用于其范围目的.

Tim Murtaugh是A List Apart的开发人员之一(不确定他是不是主要开发人员)A List Apart在他的个人网站上使用了后代选择器.

我最近一直在探索这个和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;
}