为了模块化目的，链接 CSS 类或单独命名它们更好吗？答案

【问题标题】：Is it better to chain CSS classes or name them separately for modular purposes?为了模块化目的，链接 CSS 类或单独命名它们更好吗？
【发布时间】：2013-02-08 09:43:25
【问题描述】：

例如，哪个更好：

方法 1（分别命名类）：

/* CSS */

.textbox-red, 
.textbox-green {
   padding: 10px;
   border: 1px solid #CCC;
   border-radius: 10px;   
}

.textbox-red { color: #900; }
.textbox-green { color: #3c3; }

/*HTML*/

<div class="textbox-red"></div>
<div class="textbox-green"></div>

或者------------

方法二（链类）：

/* CSS */

.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.textbox.text-red { color: #900; }
.textbox.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

两者之间有什么更好的做法？

【问题讨论】：

您不应该将类或 ID 称为“text-red”之类的名称，因为这是在类名称中说明设计决策，稍后可能会更改，例如该颜色可能必须更改为紫色，因此您在 CSS 中更改它，然后您有一个名为“text-red”的紫色文本框。因此，在这种情况下，您可以将文本框称为“text-one”或类似的名称。
注明。这只是一个例子。我通常会使用“文本警报”或“文本成功”或类似的东西。

标签： css oocss

【解决方案1】：

我的意见是你应该使用模块化 css - 您还可以组合类而不是链接它们：

/*CSS*/
.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.text-red { color: #900; }
.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

这样，当您想要在没有文本框的情况下使用红色背景时，您可以重复使用红色和绿色。这样你可以更多地重用你的代码，并且你的文本框和文本颜色之间有一个松散的耦合

【讨论】：

或者正如@BillyMoat 所说：使用文本警报或文本警告。但无论如何，我的观点是，当这些泛型类没有链接到文本框时，它们可以被重用

【解决方案2】：

我个人会使用方法 2。这样，您可以轻松地将 text-red 或 text-green 替换为 text-blue 或 text-yellow，并且仍然保留文本的基本样式。基本上，方法 2 允许更大的灵活性和可维护性，恕我直言。

【讨论】：

【解决方案3】：

根据我的经验，模块化方法为您提供了最大的灵活性。模块化 css 模式也用于Twitter Bootstrap，其中灵活性非常重要。

【讨论】：

【解决方案4】：

如果你为 IE6 做样式，首先更好，因为这个浏览器不支持第二种方法。

【讨论】：

无论您的英文如何，您的评论实际上都包含虚假信息。 IE6 确实支持链接（例如方法 2），但在计算选择器特异性和顺序时可能会有点棘手。看看这个线程：stackoverflow.com/questions/2626370/…