css - 边距和填充的通用类

Question

我已经在我的 css 中为公共边距和填充类声明了公共 css 类，这样我就可以使用它们而不会使其他 css 声明过于具体。

例如：

.padTB5{padding:5px 0;} 
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;} 
.mTop5{margin:5px 0 0;}

请指导...提前谢谢:)

score 9 · Accepted Answer

这是不好的做法，因为类应该是语义的——也就是说，它们应该描述你正在设计的事物的类型。例如“blog-header”、“primary-this”、“secondary-that”等。
在实践中，使用您所描述的类的缺点是，如果您的视觉设计发生变化并且您需要不同大小的边距或填充，那么您也需要更改类名称 - 这意味着 CSS 和 HTML 的更改。或者，如果您只是更改 CSS，则类名不再描述它们的用途。这种方法并不比使用内联样式好多少。
边距和填充是不同的东西，并且以不同的方式表现。在某些情况下，边距可能会塌陷，而填充则不会。填充将包括背景图像或颜色，而边距不包括。边框将显示在填充和边距之间。

score 4 · Accepted Answer

你不应该那样做。不建议将类命名为leftor margintop20。您应该使用类似contentorsidebarBox的类来描述内容。

假设您想将 margin-top 从 10px 更改为 1em。使用你的方法

这些都不好。

另请参阅w3.org 关于边距、填充的框模型。

score 2 · Accepted Answer

边距与填充不同。边距是框外的空间，填充是框内的空间。边距和填充都是跨浏览器兼容的。尽管不建议为边距或填充创建类，但您的声明是正确的。一个很好的用途是为圆角或阴影创建一个类，您可以通过指定圆角类快速应用圆角。

score 2 · Accepted Answer

在我看来，这不是最优的，除非你做对了。

在你的标记中，你现在有这样的东西：

<div class="pad10 mTop10">

你的网站上到处都是。

如果你想改变你的 CSS 有一点额外的边距/填充怎么办？

.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 }

哦。那些类名看起来不再那么明智了：您必须忍受错误命名的选择器，或者在所有文件中查找和替换。

如果您决定某些元素.pad10需要有红色文本怎么办？

.pad10 { padding: 12px; color: red }

现在类名更没有意义了。

如果您还对 HTML 中的每个元素应用相关的（语义上有意义的）类/id，那么做这种类型的事情可能没问题：

<div class="contactErrorMessage pad10 mTop10">

因为那样，至少你可以做到：

div.contactErrorMessage { color: red }

4 回答 4