css - 为相同标签但不同行为命名 CSS 类选择器的最佳实践

Question

假设我有一个 <td>像这样的 html 标签:

....
<td>Sample Item 1 - Common Item</td>
<td>Sample Item 2 - Important Item</td>
<td>Sample Item 3 - Common Item</td>
....

然后对于重要元素，我需要(例如)将其涂成红色。 目前 Common Item 不需要任何样式，我不知道将来是否需要任何样式。 如果我希望我的 .Less 文件遵循编写 css 类的最佳实践，我是否应该在 .Less 中创建 css 类，如下所示:

.item {
    &.item-important {
        color: red;
    }
}

并像这样使用它:

....
<td class="item">Sample Item 1 - Common Item</td>
<td class="item item-important">Sample Item 2 - Important Item</td>
<td class="item">Sample Item 3 - Common Item</td>
....

OR 我应该只在 .Less 中创建 css 类:

.important-item {
    color: red;
}

并像这样使用它:

....
<td>Sample Item 1 - Common Item</td>
<td class="important-item">Sample Item 2 - Important Item</td>
<td>Sample Item 3 - Common Item</td>
....

我有点困惑，因为在 Bootstrap 中我看到了很多类似 btn btn-default 的东西，或喜欢 glyphicon glyphicon-asterisk .为什么他们不像btn-default那样放或 glyphicon-asterisk ？我似乎找不到一篇很好的文章来解释这种 css 类命名风格的最佳实践和推理。 任何见解将不胜感激!

---------------------------- 更新 -------------- --------------

所以我当时正在阅读这份文档 http://getbem.com/naming/ ，并发现了这个: 现在我确定如果我有 item 的样式基类，最佳实践是:

....
<td class="item">Sample Item 1 - Common Item</td>
<td class="item item--important">Sample Item 2 - Important Item</td>
<td class="item">Sample Item 3 - Common Item</td>
....

但是如果我没有 item 的样式然而，是 <td class="item--important">...</td>还是不好的运动？我也在考虑这里的 YAGNI..

Answer 1

命名 CSS 类的概念被称为 BEM nomenclature/method ，它是 block-element-modifier 的首字母缩写。 BEM 所做的是它提倡一种清晰和标准化的方式来命名您的 CSS 类，这样您就不会轻易混淆。

BEM 方法激发了您遇到的 CSS 类。在您的问题中，您提到了 btn和 btn-default .在严格的 BEM 意义上，这将是 btn和 btn--default ，因为“默认”是修饰符/状态。然而，不同的作者和框架有不同的方法来分离这些术语，因此 btn-default与 btn--default 一样合法— 只要您在整个样式表中保持一致。

在这种情况下，btn是所有类按钮元素的基类。它可能包含一些基本样式(如填充、行高、定位)。 btn-default是 btn 的扩展类，可能包含按钮“默认外观”的颜色(我可以想象作者有一个标准的按钮号召性用语颜色)。声明 btn-default本身没有意义，因为它扩展或修改 btn类，这意味着它缺少按钮的基本样式。

基于这个逻辑，即使item没有任何样式明确与之关联，您仍应将其与 item--important 一起包含在您的标记中， 例如。使用 item--important本身没有任何意义。

如果你想让我听一个更详细的例子，假设你有以下布局:你想要一个 <div>跨越容器的整个宽度，有时您希望它扩展到容器之外，等等...:

body {
  background-color: #ccc;
  margin: 0;
  padding: 0;
}

section {
  background-color: #fff;
  margin: 1.5rem 3rem;
  position: relative;
}


/* Base styles for .content */

.content {
  background-color: #eee;
  margin-bottom: 1.5rem;
  padding: 1rem;
}


/** 
 * Modifier: expand
 * Now, we want to increase the width
 */
.content--expand {
  position: relative;
  left: -3rem;
  width: calc(100% + 6rem);
}

/** 
 * Modifier: important
 * Now, we want to draw attention to this content
 */
 .content--important {
  background-color: #b13131;
  color: #fff;
 }

<section>
  <div class="content">I am content, with default styles</div>
  <div class="content content--expand">I am content, with expanded width. Note that I inherit base styles from my `.content` block</div>
  <div class="content--expand">I am expanded width content without using `.content`. Look that I am messed up.</div>
  <div class="content content--important">I am a very important content.</div>
</section>

请注意 <div> 之一的外观元素关闭:那是因为它没有类 .content ，因此无法继承 .content 的“默认”外观容器 ;)