Question

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

例如：

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

请指导......提前谢谢：）

Answer 1

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

Answer 2

你不应该这样做。 left或margintop20等命名类未经修改。您应该使用描述内容的类content或sidebarBox。

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

这些都不好。

另请参阅w3.org about box model以获取保证金，填充。

Answer 3

在我看来，这不是最佳选择，除非你做得对。

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

<div class="pad10 mTop10">

你在整个网站都有。

如果您想更改CSS以获得额外的边距/填充量，该怎么办？

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

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

如果您认为.pad10的某些元素需要包含红色文字，该怎么办？

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

现在，班级名称更没意义了。

如果您还将相关的（语义敏感的）类/ id应用于HTML中的每个元素，可能可以做这种类型的事情：

<div class="contactErrorMessage pad10 mTop10">

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

div.contactErrorMessage { color: red }

Answer 4

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