Html 图像上页边距顶部和底部的命名约定

我想为它们的类提供一个简单的命名约定，而不是为图像的边距顶部和底部添加内联样式

并不是每幅图像都有上下空白

• 一些图片我想在顶部和底部有一个40px的边距
• 其他图片我想在顶部和底部有一个30像素的边距

对于这些类型的样式，我的css有什么好的命名约定

希望避免总是不得不放：

<p style="margin: 40px 0">

年，谷歌开始在Gmail中使用“”，他们将其命名为“舒适”、“舒适”和“紧凑”

您可以模仿它们的命名约定，根据图像的顶部和底部空间大小来建立类名

.comfortable { margin: 40px 0; }
.cozy { margin: 30px 0; }
.compact { margin: 10px 0; } /* or whatever you want */

---

这取决于你，使用对你来说最有意义的任何东西。如果可能的话，不要根据像素数选择类名，而是根据它所代表的类型选择类名。也就是说，我们没有构成一个好名字所需的背景，即使这样，它仍然是基于观点的。想想为什么有些东西会获得不同的利润。在CSS中，我们不使用描述CSS内容的类名，例如，我们不创建名为

blue

的类，因为当重新设计需要使用红色时，我们最终会使用

.blue{color:red；}

——这是多么令人困惑！尝试使用元素的类型，而不是元素的css属性。比如.smallImage、.bigImage、.detailsImage等。。