Style réactif à l’aide de sélecteurs d’attributs


L’un des défis auxquels nous sommes confrontés lors de l’implémentation du style atomique basé sur une classe est qu’il dépend souvent d’un point d’arrêt spécifique pour le contexte.

 
 

Il est courant d’utiliser un préfixe pour cibler chaque point d’arrêt:

Cela fonctionne bien jusqu’à ce que nous commencions à ajouter plusieurs classes. C’est alors qu’il devient difficile de garder une trace de ce qui se rapporte à quoi et où ajouter, supprimer. ou changer des trucs.

Nous pouvons essayer de le rendre plus lisible en regroupant:

Nous pouvons ajouter des séparateurs funky (les noms de classe invalides seront ignorés):

Mais cela me semble encore désordonné et difficile à saisir, du moins pour moi.

Nous pouvons obtenir une meilleure vue d’ensemble et éviter les préfixes d’implémentation en regroupant les sélecteurs d’attributs au lieu des classes réelles:


Ceux-ci ne sont pas perdus de classes, mais une liste d’attributs séparés par des espaces que nous pouvons sélectionner en utilisant [attribute~="value"], où ~= nécessite que le mot exact soit trouvé dans la valeur d’attribut pour correspondre.

@media (min-width: 0) {
 [sm~="span-1"] { /*...*/ }              
 [sm~="span-2"] { /*...*/ }   
 /* etc. */ 
}
@media (min-width: 30rem) {
 [md~="span-1"] { /*...*/ }   
 [md~="span-2"] { /*...*/ }   
 /* etc. */   
}
@media (min-width: 60rem) {
 [lg~="span-1"] { /*...*/ }   
 [lg~="span-2"] { /*...*/ }   
 /* etc. */   
}

Cela peut sembler un peu étrange, mais je pense que la traduction des classes atomiques en attributs est assez simple (par exemple .sm-span-1 devient [sm~="span-1"]). Plus, les sélecteurs d’attributs ont la même spécificité que les classes, nous n’y perdons donc rien. Et, contrairement aux classes, les attributs peuvent être écrits sans échapper de caractères spéciaux, comme /+.:?.

C’est tout! Encore une fois, il s’agit simplement d’une idée qui vise à faciliter l’écriture, la lecture et la gestion des déclarations de commutation dans les requêtes multimédias. Ce n’est certainement pas une proposition de supprimer les cours ou quelque chose comme ça.

Close Menu