为了模块化目的,链接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*/

Box-red">Box-green">

要么 – – – – – –

方法2(链类)：

/* CSS */

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

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

/*HTML*/

Box text-red">Box text-green">

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

最佳答案

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

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

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

/*HTML*/

Box text-red">Box text-green">

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