减少CSS代码重复

Question

我发现自己经常在CSS中重复使用各种代码块来处理各种元素。一个是圆角。示例代码如下：

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

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

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

第二种是在CSS中创建一个元素列表，它应该有圆形边框，如：

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

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

我是否遗漏了任何其他方法，或者在这种情况下可以帮助我减少重复的任何其他方法。事情变得混乱，特别是当您必须使用浏览器供应商属性时。

我不使用SASS或LESS，或任何CSS框架，或Compass等助手（虽然我有）。我更喜欢使用vanilla CSS编写代码。这只是我工作的方式。请不要使用这些建议。

Answer 1

除了为该元素的某些特性提供类并避免使用CSS预处理器之外，您无法做其他事情。

如果你发现自己有大约20个圆角大小的类，那么你应该质疑你的设计的一致性。

有一些关于HTML和CSS语义的精彩文章，例如http://nicolasgallagher.com/about-html-semantics-front-end-architecture/。

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

Answer 2

减少css的一种方法是使用更好的选择器。例如，如果您需要让菜单块中的所有div都具有背景颜色，那么您可以拥有：

#menu div
{
    background-colour:red;
}

请参阅Sitepoint上的CSS selectors以获得良好的参考。