8

我刚刚阅读了 CSS 的可扩展和模块化架构，它让我思考了一些事情。Snook 的两条原则是：

  1. 增加一段 HTML 和内容的语义价值
  2. 降低对特定 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 中，它仍然会成为目标。

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

4

4 回答 4

5

我更喜欢使用 .title 之类的类，而不是只选择 h5 元素，因为我觉得它更多地将 HTML 与 CSS 分离。如果无论出于何种原因，您认为 h4 或 h6 更适合文档大纲或其他一些元素/原因，如果您选择 element(h5) 与选择 class(.标题）。

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

至于在完全不同的上下文中使用同一个类有什么问题，如果你知道它将被选择器中的前一个项目命名，我对此有不同的想法。

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

另一个问题是，如果您将 .title 类用于模块中的多个“标题”实例，您可能会遇到问题。基本思想是，如果试图在模块内扩展 .title 的可重用性，则提供的局部范围后代选择器有时可能会受到太大限制。我设置了一个代码演示来展示我在这里谈论的内容。

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

Tim Murtaugh 是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;
}
于 2013-02-13T21:48:24.610 回答
2

我觉得这个没什么好说的。你所做的很好，尽管它不是为 CSS 组织标记的唯一方法。要理解的重要一点是类名不是 CSS 的一部分，它们是 HTML 的一部分。

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

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

注意到关于<h5>. 在 CSS 选择器中使用元素名称只是描述要设置样式的元素之间关系的另一种方式。.product h5作为选择器的意思是“在类'产品'的子树的上下文中设置第五级标题，就像这样......”。这是一个不同的陈述，.product .title它的意思是“在类'product'的子树的上下文中类'title'的样式元素......”。两种说法都很有用。

于 2012-08-27T23:50:24.063 回答
1

需要注意的一件非常重要的事情是，浏览器从右到左而不是从左到右读取 CSS，因此如果您将选择器构建为几层深度，那么浏览器要做的工作就更多了。

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

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

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

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

永远记住，嵌套选择器并以相同的方式命名它们但在不同的上下文中会影响性能那么重要的是要知道如何正确地构建你的标记。

于 2014-11-08T15:03:20.623 回答
0

它有时被称为“父子关系”（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

于 2015-02-19T15:30:39.203 回答