Comment puis-je réutiliser les règles CSS sans les référencer directement ?

Référencement des règles CSS : démystifier l'art de la réutilisation des règles

Bien que CSS embrasse la réutilisabilité du code, la possibilité de référencer directement un ensemble de règles au sein un autre reste insaisissable. Cependant, il existe d'autres moyens d'obtenir un effet similaire et de maintenir l'efficacité du code.

Dans l'exemple fourni :

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

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

nous sommes confrontés au défi d'appliquer à la fois les styles d'opacité et de rayon. à l'élément someDiv.

Au lieu de référencer des règles, vous pouvez réutiliser les sélecteurs sur plusieurs ensembles de règles :

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

Cette approche applique les deux ensembles de règles à l'élément someDiv.

Vous pouvez également utiliser plusieurs sélecteurs sur un seul ensemble de règles :

.opacity.radius { ... }

Cette approche nécessite l'ajout de plusieurs classes à l'élément HTML :

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

Pour améliorer la clarté du code, il est recommandé d'utiliser des noms de classe qui décrivent le but plutôt que l’apparence des éléments. Conservez les détails de style dans la feuille de style CSS pour séparer les problèmes et maintenir la flexibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!