Question

例如，哪个更好：

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

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

方法2（连锁类）：

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

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

Answer 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>

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

Answer 2

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

Answer 3

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

Answer 4

首先，如果你为IE6制作风格，因为这个浏览器不支持第二种方法。

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

4 个答案: