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

前端之家收集整理的这篇文章主要介绍了为了模块化目的,链接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">

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

猜你在找的CSS相关文章