我很想知道哪种方法是“最佳”性能明智的选择,以这个简单的一般示例为例,我希望有一个包含文本的元素,该元素以粗体加下划线并为蓝色。

我可以这样使用:

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


要么

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


第一个显然会产生更多的类,但是最终重用这些类似乎比制作一个非常具体的类要好,但是另一方面,产生更多的类,我想这会影响性能。

最佳答案

前一种方法(使用多个类)肯定更好。您不仅可以使用以下方式分别为元素设置样式:

.bold {
  font-weight: bold;
}

.underlined {
  text-decoration: underline;
}

.blue {
  color: blue;
}


但是,您也可以为它们设置样式以使其彼此特定地结合,例如:

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


在上面的示例中,仅当相应元素具有所有三个类时才使用font-size,这基本上与后一种方法本身相同:)

使用专门的类不仅可以为您提供更多的功能,而且还可以更快地进行处理-因为您可能会在整个文档中多次重复使用font-weight: bold之类的样式,所以专用类意味着您只需编写一次声明,而不是必须在每个选择器中编写它。

但是,仅应为将要多次重用的事物创建这些专门类-为仅使用一次的事物创建专门类将是多余的。

希望这可以帮助!

关于html - 元素上有很多CSS类,而一个特定类呢?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42284629/

10-12 12:50
查看更多