CSS 多类或分组类最佳实践

Question

我是 CSS/CSS3 新手，我在很多地方读到过不同的方式来构建 CSS 文件。有些人将所有标签放在同一个元素中，有些人划分元素然后在 HTML 代码中使用不同的类。 例如：

// css

h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }

所以他们只需要在 HTML 中添加即可。如果您需要更改边框颜色，则必须更改所有具有 border-bottom 的标签。

OR

h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }

并在您使用的 HTML 中：

<h1 class="black headers borderBottom">h1</h1>

非常简单，但每次您都必须放入所需的所有 CSS

有没有关于如何构建 CSS 的最佳实践？哪种方式对于性能或加载时间更好？

Answer 1

我建议使用：

h1, h2 {
    color: black;
    margin: 1em 0;
    padding: 0;
    border-bottom: solid 0.1em #ddd;
}
h1 {
    font: normal 20px Arial;
}
h2 {
    font: normal 16px Arial;
}

最佳实践：保持代码可读。通过将样式定义分离到几个无用的类中并不能实现可读性。

通常，您希望 h1 和 h2 标记具有相似的样式。因此，我对这些样式进行了分组。当您想要某个元素的另一个属性值时，您可以添加另一个 CSS 定义。 当选择器具有更高的特异性时，新的声明将覆盖以前的声明。

Answer 2

我认为这两种技术都很有用。就我个人而言，当我需要将一个元素与另一个元素分开时，我经常放置两个或多个类（例如行元素的最后一个不应包含 margin-right），我的代码如下所示：

HTML:

<div class="images-row">
    <div class="image-item">...</div>
    <div class="image-item">...</div>
    <div class="image-item">...</div>
    <div class="image-item last-in-row">...</div>
</div>

CSS:

.image-item {
    border:1px solid red;
    margin-right:20px;
    width:200px;
    height:200px;
}

.image-item.last-in-row {
    margin-right:0;
}

(在IE > 7 和其他良好的浏览器）。这个解决方案使代码非常干净，也使我编写的代码更少（我不需要重写最后一个元素的所有样式或添加单独的选择器）。 jQuery 元素处理不太混乱（我只需要一个选择器来匹配所有 .image-items）。