Améliorez votre CSS avec ces 5 principes.

L'écriture CSS est un processus assez simple et direct, alors pourquoi cela nécessite-t-il plus de principes et de meilleures pratiques?

À mesure que l'ampleur du projet et le nombre de personnes y travaillant augmentent, de plus en plus clairement de nouvelles difficultés commencent à apparaître qui peuvent causer de graves problèmes à l'avenir. Duplication de code, chaînes de redéfinition de propriétés complexes, utilisation des propriétés CSS importantes! Restantes et inutilisées des éléments HTML distants, etc. Un tel code est plus difficile à lire et à corriger.

L'écriture CSS de manière professionnelle rendra le code plus maintenable, extensible, compréhensible et propre. Examinons 5 principes simples et très efficaces qui font passer votre CSS au niveau supérieur.

---

Principe de dénomination

«En informatique, il n'y a que deux choses complexes: l'invalidation du cache et la dénomination» - Phil Carleton

Nommer et structurer correctement vos sélecteurs CSS est la première étape pour rendre votre CSS plus lisible, structuré et propre. La définition de règles et de restrictions dans une convention de dénomination rend votre code normalisé, fiable et facile à comprendre.

C'est pourquoi des concepts tels que BEM (Block-Element-Modifier) , SMACSS (Architecture évolutive et modulaire pour CSS) et OOCSS (Object Oriented CSS) sont populaires parmi de nombreux développeurs frontaux.

Principe de faible spécificité

Remplacer les propriétés CSS est très utile, mais dans les projets plus complexes, les choses peuvent devenir incontrôlables assez rapidement. Remplacer les chaînes peut devenir très long et complexe, ce qui vous obligera à utiliser !important pour résoudre les problèmes de spécificité, qui peuvent être facilement perdus lors du débogage de code ou de l'ajout de nouvelles fonctions

 /*     */ .card {} /*     */ .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {} 

Navigateur et spécificité

L'un des avantages de suivre le principe de faible spécificité est la performance. Les navigateurs analysent CSS de droite à gauche .

Jetons un coup d'œil à l'exemple suivant:

 .blog-list .card img {} 

Les navigateurs «liront» le sélecteur comme suit:

1. Rechercher toutes les balises <img> sur une page
2. À partir d'eux, sélectionnez les éléments qui descendent de la classe .card
3. À partir d'eux, sélectionnez les éléments qui sont des descendants de la classe .blog-list

Vous pouvez voir comment les sélecteurs à haute spécificité affectent les performances, en particulier lorsque nous devons sélectionner globalement un élément commun comme div , img , li , etc.

Utiliser le même niveau de spécificité

En utilisant des sélecteurs CSS à faible spécificité combinés à la méthodologie BEM ou à l'un des autres principes de dénomination mentionnés dans la section précédente, nous pouvons créer un code puissant, flexible et facile à comprendre.

Pourquoi utiliser des classes CSS? Nous voulons adhérer au même niveau de spécificité, tout en restant flexible et capable de sélectionner plusieurs éléments. Les sélecteurs d'éléments et les sélecteurs d'ID n'offrent pas la flexibilité dont nous avons besoin.

Réécrivons l'exemple précédent à l'aide de BEM et respectons une faible spécificité.

 /*     */ .card {} /*      */ .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {} 

Vous pouvez voir comment ces sélecteurs sont plus simples, plus clairs et peuvent être facilement redéfinis et étendus si nécessaire. Et en gardant leur spécificité faible (la seule classe), nous garantissons des performances et une flexibilité optimales.

Principe SEC

Le principe DRY (Ne vous répétez pas, rus. Ne répétez pas) peut également être appliqué au CSS. La duplication en CSS peut conduire à un gonflement du code, à des remplacements inutiles, à une mauvaise prise en charge, etc. Ce problème peut être résolu avec une structure de code appropriée et une documentation de qualité.

Storybook est un excellent outil gratuit qui vous permet de créer un aperçu des composants d'interface Web disponibles et d'écrire une documentation de qualité.

 /*    DRY */ .warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; } 

Refactorisons le code selon le principe DRY

 /*    DRY */ .status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; } 

Principe de responsabilité exclusive

En utilisant le principe de responsabilité unique en CSS, vous pouvez être sûr que les classes CSS sont facilement extensibles et redéfinies. Regardons l'exemple suivant

 .button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; } 

On peut voir que si vous devez étendre la classe .button à l'aide du modificateur .button - secondaire , vous devrez effectuer de nombreux remplacements, bien que nous ne voulions que changer la couleur d'arrière-plan, en conservant les styles par défaut.

Le problème est que notre classe .button a plusieurs rôles:

• Définit un modèle de bloc ( remplissage )
• Définit la typographie ( taille de police , poids de police )
• Détermine l'apparence ( couleur , couleur d' arrière-plan , rayon de bordure )

Cela complique l'extension de la classe CSS et son intégration avec d'autres classes. Dans cet esprit, améliorons notre CSS avec BEM et OOCSS.

 /*   */ .button { padding: 1rem 2rem; font-weight: bold; color: #fff; } /*   */ .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; } 

Nous avons divisé les styles de notre bouton en plusieurs classes qui peuvent être utilisées pour étendre la classe de base. Si nécessaire, nous pouvons appliquer des modificateurs et en ajouter de nouveaux au fur et à mesure que la conception change ou que de nouveaux éléments sont ajoutés

Le principe d'ouverture / de proximité

Les entités logicielles (classes, modules, fonctions, etc.) doivent être ouvertes pour l'extension, mais fermées pour le changement »

Nous avons déjà utilisé le principe ouvert / fermé dans les exemples précédents. Toutes les nouvelles fonctionnalités et options doivent être ajoutées par extension. Regardons cet exemple.

 .card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; } 

Le sélecteur .card-list .card présente plusieurs problèmes potentiels:

• Certains styles ne peuvent être appliqués que si l'élément .card est un enfant de l'élément .blog-list
• Les styles sont obligés de s'appliquer à l'élément .card s'il est placé dans l'élément .blog-list , ce qui peut entraîner des résultats inattendus et des remplacements inutiles

Réécrivons l'exemple précédent:

 .card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; } 

Nous corrigeons le problème si nous utilisons un sélecteur de classe unique. Avec ce sélecteur, nous pouvons éviter des effets inattendus et ne pas utiliser de styles imbriqués conditionnellement.

En conclusion

Nous avons examiné des exemples de la façon dont l'application de ces quelques principes simples peut améliorer considérablement l'approche de l'écriture CSS:

• Dénomination et structure normalisées, meilleure lisibilité à l'aide de BEM, OCSS, etc.
• Amélioration des performances et de la structure à l'aide de sélecteurs à faible spécificité
• Réduction des ballonnements et amélioration de la qualité du code grâce au principe DRY
• Flexibilité et maintenabilité en utilisant le principe ouvert / fermé

Merci d'avoir pris le temps de lire cet article. Si vous le trouvez utile, vous pouvez le partager ou laisser un commentaire.