我很想知道哪种方法是“最佳”性能明智的选择,以这个简单的一般示例为例,我希望有一个包含文本的元素,该元素以粗体加下划线并为蓝色。
我可以这样使用:
<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/