使用多个类来减少 CSS 冗余

假设您需要六个不同的 100 像素正方形盒子，它们具有不同的特征

• 红色带边框
• 蓝色带边框
• 绿色带边框
• 红色不带边框
• 蓝色不带边框
• 绿色不带边框

您可以为每个盒子创建一个独特的类，如下所示

.redwithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: red;
	border: 3px solid black;
}
.bluewithborder {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
	background-color: blue;
	border: 3px solid black;
}
...etc

但这种方法被称为 CSS 冗余，因为它包含了许多不必要的重复代码。 相反，只需创建五个具有简单可识别名称的类，每个类处理非常具体的某个方面。

.box {
	width: 100px;
	height: 100px;
	margin: 10px;
	float: left;
}
.red {
	background-color: red;
}
.blue {
	background-color: blue;
}
.green {
	background-color: green;
}
.border {
	border: 3px solid black;
}

在您的 HTML 中，内容看起来同样简洁，只需在您想要应用于 div 的每个类之间添加一个空格。

	<div class="red border box">
	</div>
	
	<div class="blue border box">
	</div>
	
	<div class="green border box">
	</div>
	
	<div class="red box">
	</div>
	
	<div class="blue box">
	</div>
	
	<div class="green box">
	</div>

这种方法也提供了更好的未来灵活性。 如果你想要创建一个橙色的盒子，甚至是一个带有背景图片或其他完全独立特征的盒子，你都可以。 然后，向这个新盒子添加边框很简单，只需添加一个空格和 "border" 类名即可。

[示例页面]