减少CSS代码重复

我发现自己不断地在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编写代码.这只是我工作的方式.请不要使用这些建议.

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

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

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

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