Wie kann ich CSS-Stile effizient wiederverwenden, ohne direkt auf Regeln zu verweisen?

CSS-Regeln in anderen referenzieren: Ein Leitfaden für effizientes Styling

In CSS können Sie nicht direkt auf einen Regelsatz von einem anderen verweisen. Es gibt jedoch zwei praktikable Ansätze, um die Wiederverwendbarkeit des Codes und ein effizientes Styling zu erreichen.

Selektoren wiederverwenden

Sie können Selektoren über mehrere Regelsätze hinweg innerhalb eines Stylesheets wiederverwenden. Betrachten Sie den folgenden Code:

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}

In diesem Beispiel wird der .opacity-Regelsatz auf beide Elemente angewendet, die der .opacity-Klasse und der .someDiv-Klasse entsprechen.

Verwendung mehrerer Selektoren

Sie können auch mehrere Selektoren für einen einzelnen Regelsatz verwenden. Dies geschieht durch Trennen der Selektoren durch Kommas:

.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

Bei diesem Ansatz wird der .radius-Regelsatz auf beide Elemente angewendet, die der .radius-Klasse und der .someDiv-Klasse entsprechen.

Anwenden mehrerer Klassen auf HTML-Elemente

Schließlich können Sie mithilfe des Klassenattributs mehrere Klassen auf ein einzelnes HTML-Element anwenden. Dadurch können Sie mehrere Regelsätze auf dasselbe Element anwenden:

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

Dieser Code wendet sowohl die .opacity- als auch die .radius-Regelsätze auf das