很多 CSS class 是关于元素还是一个特定的 class？

Question

我很想知道哪种方式 'best' 性能明智，想想这个简单的一般示例，我希望有一个包含文本的元素，加粗下划线和蓝色。

我可以这样使用：

<p class="bold underlined blue">Happy little clouds</p>

或

<p class="bold-underlined-blue">Happy little trees</p>

第一个显然会产生更多的 classes，但这些 classes 的最终重用似乎比使一个非常具体 class 更好，但同样另一方面，生成更多 classes，我认为这会对性能产生影响。

Answer 1

前一种方法（使用多个 classes）肯定更好。您不仅可以单独设置元素样式：

.bold {
  font-weight: bold;
}

.underlined {
  text-decoration: underline;
}

.blue {
  color: blue;
}

但您也可以将它们设置为彼此的特定组合，例如：

.bold.underlined.blue {
  font-size: 18px;
}

在上面的示例中，font-size 仅在相应元素具有全部三个 class 时才会应用，这本质上与后一种方法本身相同:)

使用专门的 classes 不仅可以为您提供更多功能，而且速度也更快——因为您可能会在整个文档中多次重复使用 font-weight: bold 等样式，专用的 class 意味着你只需要写一次声明，而不是必须在每个单独的选择器中写。

但是，这些专门的 class 应该只为您将多次重复使用的东西创建——为只使用一次的东西创建专门的 class 是多余的。

希望对您有所帮助！

A lot of CSS classes on element vs one specific class?