CSS 类应该代表什么？ [复制]答案

【问题标题】：What should a CSS Class represent? [duplicate]CSS 类应该代表什么？ [复制]
【发布时间】：2011-06-08 11:14:21
【问题描述】：

可能重复：
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 类名应该代表元素是“按钮文本”还是“状态”，元素看起来像“中心”？

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

CSS 类应该代表您使用该元素的目的，而不是该元素的外观。

假设您有红色和粗体的标题，并将设计更改为大的蓝色字母。如果你按照标题的外观命名你的类，你最终会得到：

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

【讨论】：

【解决方案2】：

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

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

另一个选项是指定多个类，例如class="按钮文本" 而不是 class="按钮文本"。这给了你：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

如果这些情况经常发生在例如 p 标记中，那么最好将一个类放在父级中，以便子级可以继承它。

【讨论】：

【解决方案5】：

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

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

如果他们需要一些独特的东西，那就把它添加到另一个

即

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

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

【讨论】：