Question

可能重复：
Should css class names like 'floatleft' that directly describe the attached style be avoided?

我想知道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%;
}

Answer 2

拥有一个名为center的类绝对是错误的方法 - 这个类名已经暗示了表示，这不是在单独的文件中定义表示的要点。避免代码重复的更好方法是：

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

另一种选择是指定多个类，例如class =“button text”而不是class =“button-text”。这给你：

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

不幸的是，如果您需要支持MSIE 6.0，则必须排除这种方法，所有其他浏览器（包括较新的MSIE版本）都能正确处理多个类。正如其他人已经注意到您选择的解决方案主要是维护问题 - 选择一个更容易改变并适应新要求的解决方案。

Answer 3

可维护性是王道。无论你发现什么最容易维护 - 在我看来，这是你的第二个例子。

Answer 4

我倾向于将项目组合在一起，例如

.button-text, .header-text{
    text-align:center
}

然后如果他们需要一些独特的东西将其添加到另一个

即

.button-text{
    font-size:22px;
}
.header-text{
    font-size:44px;
}

类名应该是有用的，但它不是一个大问题，只是确保它们是唯一的。通常我会根据页面或部分中的层次结构来命名，以防止意外重复。

Answer 5

这取决于你将文本集中在多少，第二点的问题是你最终可能会在HTML中的每个元素中添加一长串的类，这些类不是那么干净。

如果这些发生在例如p标签中，那么你可能最好将一个类放在父类中，以便孩子们可以继承它。