减少CSS代码重复

我发现自己不断重复使用各种CSS元素的各种代码块。一个是圆角。下面的实施例的代码：减少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或更少，或任何CSS框架或佣工如指南针（虽然我有）。我更喜欢用香草CSS编码。这只是我工作的方式。请不要使用这些建议。

来源

2013-05-07 James Jeffery

我不认为有那么多规则需要供应商前缀。你当然不需要'border-radius'的厂商前缀 – 2013-05-07 23:07:57

@ExplosionPills我并不知道这一点，border-radius只是一个例子。 – 2013-05-07 23:09:24

如果您不愿意使用“.rounded”类，则您建议的第二种方法似乎具有最少的问题。这当然不应该是一个问题，并且它可以更容易地更改所有角落的实例。唯一的潜在问题是如果你想要一堆有不同大小的角落。我同意下面的@Elliot Lings的答案：如果你不愿意使用单一的样式类来实现它，那么在你的重用中可能会有一个更深层次的问题。 – 2013-05-07 23:12:28

除了给类为元素的某些功能，并避免CSS预处理器没有太多其它你能做到的。

如果您发现自己具有圆角大小约20多类，那么你应该问你的设计的一致性。

上有HTML和CSS语义如http://nicolasgallagher.com/about-html-semantics-front-end-architecture/一些伟大的文章。

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

来源

2013-05-07 23:10:33

+1;这基本上是我要写的。我唯一要补充的是，只使用''rounded'类;这正是*正确的方式，不仅在CSS和HTML之间，而且在CSS内分离问题。 – 2013-05-07 23:14:21

我同意。拥抱可用于“修复”CSS缺陷并加速开发的工具。 – Bart 2013-05-07 23:17:04

@Elliot我会检查出那篇文章谢谢。我可能会跳回到使用SASS。 – 2013-05-07 23:17:13

-2

削减CSS的一种方法是使用更好的选择器。例如，如果你需要将所有div在菜单块有一个背景颜色，你可以有：

#menu div 
{ 
    background-colour:red; 
}

一个良好的refrence见CSS selectors在Sitepoint。

来源

2013-05-07 23:46:43 mikek3332002

减少CSS代码重复

回答

相关问题