Wie kann ich CSS-Regeln wiederverwenden, ohne direkt darauf zu verweisen?

Referenzierung von CSS-Regeln: Die Kunst der Wiederverwendung von Regeln entmystifizieren

Während CSS die Wiederverwendbarkeit von Code umfasst, bedeutet dies die Möglichkeit, direkt auf einen darin enthaltenen Regelsatz zu verweisen ein anderer bleibt schwer fassbar. Es gibt jedoch alternative Möglichkeiten, einen ähnlichen Effekt zu erzielen und die Codeeffizienz aufrechtzuerhalten.

Im bereitgestellten Beispiel:

<div class="someDiv"></div>

.opacity { filter: ... }
.radius { ... }

wir stehen vor der Herausforderung, sowohl Deckkraft- als auch Radiusstile anzuwenden zum someDiv-Element.

Anstatt auf Regeln zu verweisen, können Sie Selektoren für mehrere wiederverwenden Regelsätze:

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

Dieser Ansatz wendet beide Regelsätze auf das someDiv-Element an.

Alternativ können Sie mehrere Selektoren für einen einzelnen Regelsatz verwenden:

.opacity.radius { ... }

Dieser Ansatz erfordert das Hinzufügen mehrerer Klassen zum HTML-Element:

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

Um die Klarheit des Codes zu verbessern, wird die Verwendung von Klassen empfohlen Namen, die eher den Zweck als das Aussehen von Elementen beschreiben. Behalten Sie die Stildetails im CSS-Stylesheet bei, um Bedenken zu trennen und die Flexibilität zu wahren.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Regeln wiederverwenden, ohne direkt darauf zu verweisen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!