>增加HTML和内容的一部分的语义值
>降低特定HTML结构的期望
因此,这意味着使用语义类名称而不是依赖于非语义元素类型进行定位.例如,而不是以.someClass h5为目标,我可能会将.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在下面的回答中提到的,标题标签不是非语义的,所以这可能不是最好的例子.
显然,我可能会在这些上下文中做一些与标题完全不同的东西,但title对于模块的命名空间是绝对有意义的,而且我从来没有打算使用title作为常规选择器.
这似乎勾选了所有方框.它在语义上很丰富,完全与实现分离.例如,如果最后一个示例被更改为ol或一堆div,则没有任何内容会中断,如果title被包装在div中,它仍然会被定位.
这对我来说很有意义,但我没有看到这种方法用得太多,我想知道为什么.一个明显的缺点是你在选择器中链接类,但我认为这比命名每个类名称更可取.
解决方法
这就是为什么我更喜欢将所有事情与元素选择器分类,因为标记可能会随着时间的推移而改变.如果您在一个没有看到很多更新的小型网站上工作,这可能不是一个问题,尽管知道这一点很好.
如果在完全不同的上下文中使用同一个类有任何问题,如果你知道它将被选择器中的前一个项命名,那么我对它有不同的想法.
一方面,我会想到一些问题,例如.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;
}
