为了模块化的目的，链接CSS类还是单独命名它们更好？

例如，哪个更好：

方法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>

/*CSS*/
.文本框红色，
.文本框绿色{
填充：10px；
边框：1px实心#CCC；
边界半径：10px；
}
.textbox红色{颜色：#900；}
.textbox绿色{颜色：#3c3；}
/*HTML*/

或------------

方法2（链类）：

/* 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>

/*CSS*/
.文本框{
填充：10px；
边框：1px实心#CCC；
边界半径：10px；
}
.textbox.text-red{color:#900；}
.textbox.text-green{color:#3c3；}
/*HTML*/

---

在这两种方法中，什么是更好的做法？

首先，如果您为IE6制作样式，那么效果会更好，因为此浏览器不支持第二种方法。

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

我的意见是，您应该使用模块化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>

/*CSS*/
.文本框{
填充：10px；
边框：1px实心#CCC；
边界半径：10px；
}
.text红色{颜色：#900；}
.text绿色{颜色：#3c3；}
/*HTML*/

---

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

我个人会选择方法2。这样，您就可以轻松地将文本红色或绿色替换为文本蓝色或文本黄色，并且仍然保持文本的基本样式。基本上，方法2允许更大的灵活性和可维护性，IMHO。

您不应该调用类或ID之类的东西，例如“文本红色”，因为这是在类名中声明设计决策，以后可能会更改，例如，该颜色可能必须更改为紫色，因此您可以在CSS中更改它，然后您有一个名为“文本红色”的紫色文本框。因此，在这种情况下，您可以将您的文本框称为“text one”或类似的名称。这只是一个例子。我通常会使用“文本警报”或“文本成功”之类的东西，或者像@BillyMoat所说的：使用文本警报或文本警告。但无论如何，我的观点是，当这些泛型类没有链接到TextBox时，它们可以被重用。不管你的英语如何，你的注释实际上包含错误的信息。IE6确实支持链接（例如方法2），但在计算选择器的特异性和顺序时，它可能会变得有点棘手。看看这条线：