CSS类应该代表什么？

可能重复：

我想知道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*/
}

并将“中心”类应用于具有“按钮文本”和“标题文本”类的元素

归根结底，CSS类名应该表示一个元素是什么“按钮文本”还是“状态，一个元素看起来像什么“中心”

---

谢谢！

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

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

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

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

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

即

---

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

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

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

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

即

---

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

这取决于您将文本居中的程度，第二点的问题是，您可能最终会在每个页面或部分中添加一长串类元素，它不是很干净

---

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

这取决于您将文本居中的程度，第二点的问题是，您可能会在HTML中的每个元素中添加一长串不太干净的类

---

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

使用名为

center

的类肯定是错误的方法-这个类名已经暗示了表示，这不是在单独的文件中定义表示的目的。a避免代码重复的更好方法是：

.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版本），则必须排除这种方法正确处理多个类。正如其他人已经注意到，您选择的解决方案主要是一个维护问题-选择一个更易于更改和适应新需求的解决方案。

拥有一个名为

中心的类肯定是错误的方法-这个类名已经暗示了演示，即在单独的文件中定义表示的意义。避免代码重复的更好方法是：

.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版本），则必须排除这种方法正确处理多个类。正如其他人已经注意到的，您选择的解决方案主要是维护问题-选择一个更易于更改和适应新需求的解决方案。
CSS类应该表示您使用元素的目的，而不是元素的外观

考虑您的标题是红色和粗体，并将设计改为蓝色大字。如果您根据标题的外观命名类，则最终会得到：

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

CSS类应该表示元素的用途，而不是元素的外观

考虑您的标题是红色和粗体，并将设计改为蓝色大字。如果您根据标题的外观命名类，则最终会得到：

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

像Dotless这样的工具可以用来帮助维护你的代码。我想知道更多关于类真正应该代表什么，而不是关于代码的可维护性。我仍然倾向于你的第二个例子。可能是很好的做法，但对于可能需要经常进行小更改的大型站点，最好将它们分开！其他ise一个简单的更改可能会产生许多不希望出现的效果！可以使用Dotless等工具来帮助维护代码。我想知道更多关于类真正应该代表什么，而不是关于代码的可维护性。我仍然倾向于您的第二个示例。可能是很好的做法，但对于可能有微小更改的大型站点经常需要这样做，那么最好将事情分开！否则一个简单的改变可能会产生许多不希望的效果！-1个红色的类，颜色：蓝色与帖子相矛盾…@Treemonkey:你没有抓住重点。请再读一遍答案。@Guffa我的错！你说得对；）@Treemonkey:你现在应该可以收回否决票了。@Guffa/@thirtydot:整理好了投票！-1个红色粗体，颜色：蓝色与帖子相矛盾…@Treemonkey:你没抓住重点。再看一遍答案。@Guffa我的错！你得到了一个重点；）@Treemonkey:你现在应该可以收回否决票了。@Guffa/@thirtydot:投票！