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的所有标记。

或

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＆gt; 7及其他优秀浏览器中得到支持）。这个解决方案使代码非常干净，也让我写得更少（我不需要为最后一个元素重写所有样式或添加单独的选择器）。 jQuery元素处理不那么令人困惑（我只需要一个选择器来匹配所有.image-items）。

CSS多类或分组类最佳实践

2 个答案: