css - 可重用的 CSS 类还是很多？

Question

有一个我经常想知道的问题。拥有多个可在站点多个位置使用的 CSS 类是否更好，例如

.padding5 {padding:5px;} 
.margin10 {margin:10px;} 
.left {float:left;}
.right {float:right;} 

所以你的 HTML 代码看起来像这样

<div class="padding5 left"> ... </div>

或者更确切地说，为每个元素都有显式的类。即

.title-demo {padding:5px; float:left;}

使用 HTML

<div class="title-demo"> ... </div>

顶级组织的明显优势是，您不必一遍又一遍地重复 CSS，而且对于较大的网站，您的 CSS 样式表要小得多。

只是想知道专家们推荐了什么？我的想法本质上是创建一个“混合”解决方案，允许将通用 CSS 包含为与类等组合的“padding5”？

Answer 1

不! CSS 类名应该是描述性的和上下文相关的。正如您所描述的那样，您正在将自己锁定在维护灾难中。如果 padding5 的填充会怎样？成为10px之后？想象一个名为“blue”的类，您将其颜色更改为红色。您最终会得到一个需要维护的网站。

我建议使用您网站的命名部分:

 #Agenda {
 }

 #Agenda .Item {
 }

 #Agenda .Item h1 {
 }

所有评论后更新:

为具有共同属性的网站部分提供一个概念名称怎么样 -> SideBarItem , Acticle , ItemFooter , Widget 。然后，您网站中的任何元素都会获得指定部分之一的类和一些附加类。 <div class="Widget WeatherForecast">和<div class="Widget CurrencyConverter">类Widget定义公共(public)属性，其他类定义特定属性。

.Widget {
 padding: 10px;
 float: left;
 margin: 5px;
}

.WeatherForecast {
 background: red;
 color: white;
}

.CurrencyConverter {
 background: blue;
 color: black;
}