可重用的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晚怎么办？想象一下名为"蓝色"的类,您将颜色更改为红色.你最终会得到一个难以维护的网站.

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

 #Agenda {
 }

 #Agenda .Item {
 }

 #Agenda .Item h1 {
 }

所有评论后更新:

怎么样让具有共同特性的概念名您的网站的部分- > SideBarItem,Acticle,ItemFooter,Widget.然后,您网站中的任何元素都会为其中一个命名部分和一些其他类获取一个类.<div class="Widget WeatherForecast">和<div class="Widget CurrencyConverter">class Widget定义公共属性,而另一个类定义特定属性.

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

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

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