css - 减少 CSS 代码重复

Question

我发现自己不断地为各种元素重用 CSS 中的各种代码块。一是圆角。下面的示例代码：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

我尝试了 2 种不同的方法来减少代码重复，这两种方法都有缺点。

第一种是将代码包装在诸如 .rounded10 之类的类中，并将该类添加到页面上所有需要圆角边框的元素中（有 20 多个）。Bootstrap 做了类似的事情，但我不喜欢这种方法，因为它会将非语义数据引入 HTML。

第二个是在 CSS 中创建一个应该具有圆角边框的元素列表，例如：

.offers, .welcome, .sidebar, .post {
   ... Rounded corners code here ...
}

我不确定是否使用了这种方法，我还没有看到它。

在这种情况下，我是否错过了任何其他方法或任何可以帮助我减少这种重复的方法。事情变得一团糟，尤其是当您必须使用浏览器供应商属性时。

我不使用 SASS 或 LESS，或任何 CSS 框架，或 Compass 等助手（尽管我有）。我更喜欢使用 vanilla CSS 进行编码。这就是我的工作方式。请不要对使用这些提出建议。

score 8 · Accepted Answer

除了为该元素的某些特性提供类并避免使用 CSS 预处理器之外，您无能为力。

如果您发现自己有大约 20 种不同的圆角尺寸类别，那么您应该质疑设计的一致性。

我不建议您使用 SASS 或 LESS 之类的东西，但我强烈建议您这样做。它将允许您轻松添加圆角类并节省您输出 CSS 压缩格式的时间。

score -2 · Accepted Answer

修剪 css 的一种方法是使用更好的选择器。例如，如果您需要div在菜单块中包含所有内容以具有背景颜色，您可以：

#menu div
{
    background-colour:red;
}

2 回答 2