Style réactif à l'aide de sélecteurs d'attribut

Un défi avec des styles atomisés basés sur les noms de classe est qu'il s'appuie souvent sur des points d'arrêt spécifiques pour déterminer le contexte.

<div></div>
<div></div>
<div></div>

Les préfixes sont généralement utilisés pour localiser chaque point d'arrêt:

<div></div>

Cela fonctionne bien avant d'ajouter plusieurs classes. Mais lorsque nous commençons à ajouter plusieurs classes, il est difficile de suivre les classes liées aux points d'arrêt et où ajouter, supprimer ou modifier du contenu.

<div>
</div>

Nous pouvons essayer d'améliorer la lisibilité en regroupant:

<div>
</div>

Nous pouvons également ajouter des séparateurs spéciaux (les noms de classe non valides seront ignorés):

<div>
</div>

Mais cela semble toujours déroutant et difficile à comprendre.

Nous pouvons obtenir un meilleur aperçu et éviter d'implémenter les préfixes en regroupant des sélecteurs de propriétés au lieu de classes réelles:

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

Ce ne sont pas des collections de classes, mais des ensembles de propriétés séparées de l'espace, que nous pouvons sélectionner en utilisant le sélecteur [attribute~="value"] , où ~= nécessite que le mot exact apparaisse dans la valeur d'attribut à correspondre.

 @Media (min-large: 0) {
 [data-sm ~ = "span-1"] {/*...*/}
 [data-sm ~ = "span-2"] {/*...*/}
 /* etc. */
}
@Media (min-large: 30rem) {
 [data-md ~ = "span-1"] {/*...*/}
 [data-md ~ = "span-2"] {/*...*/}
 /* etc. */
}
@Media (Min-Width: 60rem) {
 [data-lg ~ = "span-1"] {/*...*/}
 [data-lg ~ = "span-2"] {/*...*/}
 /* etc. */
}

Cela peut sembler un peu bizarre, mais je pense que la conversion d'une classe atomique en propriété est assez simple (par exemple, la conversion .sm-span-1 en [data-sm~="span-1"] ). De plus, le sélecteur de propriétés a la même spécificité que la classe, donc nous ne perdons rien. De plus, contrairement aux classes, les propriétés peuvent être écrites sans échapper à des caractères spéciaux (tels que / .:? ).

C'est ça! Encore une fois, ce n'est qu'une idée de rendre les instructions de commutation plus faciles à écrire, à lire et à gérer dans les requêtes multimédias. Ce n'est certainement pas une suggestion d'annuler les cours ou quelque chose comme ça.

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!