边距和填充的通用类答案

【问题标题】：Common classes for margin and padding边距和填充的通用类
【发布时间】：2011-07-01 21:05:39
【问题描述】：

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

例如：

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

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

【问题讨论】：

类应该与元素在文档中的作用相关，而不是它的外观。好：页眉、页脚、注释、标题、主菜单……坏：红色、margin5、粗体、……
感谢大家为如此快速的响应和讨论所做的努力。 @VirtualBlackFox：对于大多数模块，整个站点的顶部和底部都需要 5px 或 10px（最大）间距......所以如果我保留这些类，你会为这些类建议什么名称，以便它们很容易识别?
这些被称为原子类。使用不包括实际单位大小的命名约定。例如：对于一个小的 margin-bottom，写 mb-s。对于大的 padding-right，写 .pr-l。大小可以写成：-xs、-s、-m、-l、-xl。至于朱利安所说的，请忽略该建议。这就是雅虎、因纽特人 5.0 和其他人所做的。它实际上防止了对象抽象中规则的重复。我已经与 Johnathen Snook、Harry Roberts 和其他专家进行了交谈，他们同意他们有自己的位置 - 只是限制他们。
我忘了补充，您不想在原子类中包含单位大小的原因是设计原因。一个很好的地方是在雅虎的源代码中。他们的 GitHub 上也有一个生成器。 SuitCSS 也有一些很好的“帮助”类。再说一次，这对其他贡献者来说听起来并不刻薄，但这在前端 UI 世界中是非常可接受的，甚至被最佳现代实践的先驱者使用。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

<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】：

你不应该那样做。不建议将类命名为 left 或 margintop20。您应该使用描述内容的类，如 content 或 sidebarBox。

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

这些都不好。

请参阅w3.org goodclassnames 了解此内容。

另请参阅w3.org about box model 了解边距、内边距。

【讨论】：