CSS entschlacken durch Verwendung mehrerer Klassen

Nehmen wir an, Sie benötigen sechs verschiedene 100px quadratische Boxen mit unterschiedlichen Eigenschaften

• Rot mit Rahmen
• Blau mit Rahmen
• Grün mit Rahmen
• Rot ohne Rahmen
• Blau ohne Rahmen
• Grün ohne Rahmen

Sie KÖNNTEN für jede dieser Optionen eine eindeutige Klasse erstellen, wie folgt:

.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

ABER das nennt man CSS-Bloat, weil es eine Menge unnötigen repetitiven Code enthält. Erstellen Sie stattdessen nur fünf Klassen mit einfachen, identifizierbaren Namen, die jeweils etwas sehr Spezifisches handhaben.

.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;
}

In Ihrem HTML sehen die Dinge genauso sauber aus, fügen Sie einfach ein Leerzeichen zwischen jeder der Klassen ein, die Sie auf das Div anwenden möchten.

	<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>

Diese Methode ermöglicht auch eine bessere zukünftige Flexibilität. Wenn Sie eine orangefarbene Box erstellen möchten, oder sogar eine Box mit einem Hintergrundbild oder einer völlig separaten Eigenschaft, könnten Sie das tun. Und dann ist das Hinzufügen eines Rahmens zu dieser neuen Box ein einfaches Hinzufügen eines Leerzeichens und des Klassennamens "border".

[BEISPIELSEITE]