CSS风格最佳实践

Question

定义单个特定类是否更好

<div class="text_bold_white"> text </div>

.text_bold_white {
    font-weight: bold;
    color: white;
}

或者将样式分成2个类更好

<div class="text_bold color_white"> text </div>

.text_bold {
    font-weight: bold;
}
.color_white {
    color: white;
}

来自编程背景,我倾向于第二,因为它允许可重用​​性.但我想知道是否会导致定义太多样式.它有渲染性能的影响吗？

Answer 1

我认为商定的最佳实践是使用语义类.因此,如果这是例如文章的标题,它应该看起来像:

HTML:

<div class="article-header"> text </div>

CSS:

.article-header{
  font-weight: bold;
  color: white;
}

造成这种情况的主要原因是:你不想进入该网站的HTML或代码只是删除white,并bold从你的所有的文章标题类,并添加grey和italic,当你决定大胆和白色是不正确的风格.你想要一个叫做article-header只编辑css的类.