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

NO！ Css类名称应该是描述性的和上下文的。你正如你所描述的那样将自己锁定在维护灾难中。如果padding5的填充后来变为10px怎么办？想象一下名为“蓝色”的类，您将颜色更改为红色。你最终会得到一个难以维护的网站。

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

 #Agenda {
 }

 #Agenda .Item {
 }

 #Agenda .Item h1 {
 }

所有评论后更新：

如何为您的网站提供具有共同属性的概念名称 - ＆gt; SideBarItem，Acticle，ItemFooter，Widget。然后，您网站中的任何元素都会为其中一个命名部分和一些其他类获取一个类。 <div class="Widget WeatherForecast">和<div class="Widget CurrencyConverter">类Widget定义了公共属性，另一个类定义了特定属性。

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

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

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

Answer 2

绝对是后来的。像.padding5这样的类真的无法将样式声明移动到样式表中。

Answer 3

使用CSS的方式类似于内联样式（实际上你只是将内联样式包装在CSS类中）。所以简短的回答是：不要那样使用它。

就像BoltClock所说，在一些有意义的类中定义填充没有坏处。最佳实践是将常用样式移动到它们自己的类中，但在定义这些常见样式时应该合理：只有填充的定义不应该作为类本身存在。

你的第二个建议肯定是要走的路。

Answer 4

基于样式的类名可能有用的一个地方是，如果你有一套相当复杂的样式，你想要应用于很多不同的东西。

CSS网格系统（例如http://960.gs）执行此操作，因为它们的样式相当复杂（特别是考虑到Internet Explorer的修复时），并且它们旨在应用于许多不同的元素

如果他们没有使用基于样式的类名，则需要在样式表中的几个不同位置重复类中的样式规则，或者为要使用该样式的元素堆叠所有选择器在它上面，它们都不是特别容易使用，维护方面。

但一般来说，CSS样式设计得足够简单，你不需要封装它们。

可重用的CSS类或批次？

4 个答案: