CSS类应代表什么？

Question

可能重复:
是否应避免直接描述附加样式的css类名称如'floatleft'？

我想知道CSS类的命名和使用的最佳实践是什么.

例如,在您想要将按钮文本和标题文本的文本居中的场景中,最好在两个类中重复此样式,例如

.button-text {
    text-align: center;
    /*some properties*/
}
.header-text {
    text-align: center;
    /*other properties*/
}

或者更好的做法是将这种风格移到一个单独的类中

.center {
    text-align: center;
}
.button-text {
    /*some properties*/
}
.header-text {
    /*other properties*/
}

并将"center"类应用于具有"button-text"和"header-text"类的元素.

归结为,CSS类名称应该表示元素是"按钮文本"还是"状态,元素看起来像什么"中心？

谢谢!

Answer 1

CSS类应该表示您使用元素的内容,而不是元素的外观.

考虑您有红色和粗体的标题,并将设计更改为大的蓝色字母.如果您在标题的外观之后命名了类,那么最终会得到:

.RedBold {
  color: blue;
  font-size: 200%;
}