Können CSS-Regeln für wiederverwendbares Styling aufeinander verweisen?

CSS-Regeln referenzieren: Ein tiefer Einblick

Im Bereich CSS ist es wichtig, Elemente präzise und effizient zu gestalten. Es stellt sich die Frage: Kann eine CSS-Regel auf eine andere verweisen und so einen wiederverwendbaren Stil ohne Codeduplizierung ermöglichen?

Die Antwort

Eine direkte Referenzierung von CSS-Regeln ist zwar nicht möglich, aber dennoch möglich effektive Alternativen, um ein ähnliches Ergebnis zu erzielen:

Methode 1: Teilen Selektoren

Sie können Selektoren für mehrere Regeln innerhalb eines Stylesheets wiederverwenden, indem Sie sie in einer durch Kommas getrennten Liste auflisten. Wenn Sie beispielsweise sowohl den Deckkraft- als auch den Radiusstil auf die .someDiv-Klasse anwenden möchten, können Sie sie wie folgt schreiben:

.opacity, .radius {
    ...
}
.someDiv {
    ...
}

Methode 2: Mehrere Klassen für Elemente

Anstatt eine separate Regel zu erstellen, können Sie dem HTML-Element selbst mehrere Klassen hinzufügen. Um beispielsweise sowohl Deckkraft als auch Radius auf das

<div class="opacity radius">
    ...
</div>