Question

我刚读过Scalable and Modular Architecture for CSS，这让我想到了一些事情。 Snook的两个主要原则是：

增加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在下面的回答中提到的那样，标题标签不是非语义的，所以这可能不是最好的例子。

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

这似乎打破了所有方框。它在语义上很丰富，与实现完全分离。例如，如果最后一个示例被更改为ol或一堆div，则没有任何内容会中断，如果title被包装在div中，它仍然会被定位。

这对我来说很有意义，但我没有看到这种方法用得多，我想知道为什么。一个明显的缺点是你在选择器中链接类，但我认为这比命名每个类名更好。

Answer 1

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

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

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

一方面，我想到了一些问题，例如.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;
}

Answer 2

我认为对此没什么好说的。你正在做的很好，虽然它不是组织CSS标记的唯一方法。要理解的重要一点是，类名不是CSS的一部分，它们是HTML的一部分。

因此，应用于元素的类在HTML术语中不是由DOM树中的祖先“命名空间”，而是独立存在。因此，对于示例中每个元素的类名使用“title”是合理的，因为它们在标题中都是相似的。

一个相反的例子是使用“note”的类名，在一个元素上它表示注释的类型，但在另一个元素上表示音符，然后假设它们的含义可以通过检查来区分祖先元素。这不是HTML类的工作方式。

还注意到<h5>没有任何无意义的内容。在CSS选择器中使用元素名称只是描述要设置样式的元素之间关系的另一种方式。 .product h5作为选择器意味着“在类'产品'的子树的上下文中设置第五级标题，如此......”。这是.product .title的一个不同的陈述，它表示“类'产品'的子树上下文中”类'标题'的样式元素，就像这样...“。这两个陈述都很有用。

Answer 3

需要注意的一件非常重要的事情是，浏览器从右到左阅读CSS，而不是从左到右阅读。因此，如果您将选择器的结构设置得很少，那么浏览器就可以做更多工作。

.pageHeader .title {}
.leadArticle .title {}
.productPreview .product .title {}

所以这是一个.title但在不同的背景下。渲染时的浏览器将检查子元素是否放置在特定父元素内，然后它将应用相应的规则。

.pageHeader-title {}
.leadArticle-title {}
.productPreview .product-title {}

这里我们有3个非常不同的标题（不是一个！）所以浏览器不会做任何额外的计算，也不会检查孩子是否是特定父母的孩子。我们在这里也有更平坦的模块结构，总是很好。

永远记住，嵌套选择器并以相同的方式命名它们但在不同的环境中对性能产生影响，如果您正在编写小型个人网站，但是如果您需要规划和提供解决方案，那么这并不意味着什么数百万人将会看到这一点，然后了解如何正确构建标记非常重要。

Answer 4

它有时被称为“亲子关系”（http://thesassway.com/advanced/modular-css-naming-conventions），并且通常建议与.page-header-title一起使用。

在您的情况下，.page-header可被视为组件，.title可视为组件。 RCSS（https://github.com/rstacruz/rscss/）标准倡导者.page-header > .title。我个人认为这不是一个好主意。请考虑以下事项：

<header class="page-header">
<h2 class="title">
  <span class="tooltip">
    <span class="title">..</span>
  </span>
</h2>
</header>

.tooltip > .title无意中继承自.page-header > .title。

所以我会选择.page-header-title。

当您确实希望从基类继承标题时，只需将类添加到HTML元素

即可

<header class="page-header">
<h2 class="page-header-title title">
</h2>
</header>

现在page-header-title包含特定于组件的样式，title包含抽象标题样式。是的，它很冗长，但很安全。在这里，如果有任何兴趣，我对如何保持风格级联合理并具有清晰明显的抽象的详细意见https://github.com/dsheiko/pcss

SMACSS，语义类名称和嵌套元素

4 个答案: