为同一标签命名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，它是 b lock- e lement- 的首字母缩写词米 odifier。 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，因此无法继承{{1}的“默认”外观容器;）