Meilleures pratiques CSS: neuf signes d'un mauvais CSS

Feuilles de style CSS ou en cascade - Le langage qui définit l'apparence et parfois le comportement d'une page Web. Il est souvent négligé par les développeurs Web comme un langage «facile» qui ne nécessite pas trop d'attention. La mémorisation de certaines des propriétés les plus courantes, le flux général et la recherche de propriétés plus obscures sur Google sont la voie à suivre. Mais, comme le savent les développeurs plus expérimentés, aucun langage ne mérite d'être négligé car il y a toujours de bonnes et de mauvaises façons de faire quelque chose.

Avec CSS, il est très facile de faire les choses de la mauvaise manière car il n'y a pas de compilateur qui génère des erreurs, il n'y a pas d'avertissements ou d'avis pour de mauvaises implémentations. Un langage de programmation comme JavaScript a une tonne d'outils qui suivent la bonne qualité du code, certains lancent même des messages au développeur qu'une certaine fonction n'a pas été implémentée de la bonne manière.

Dans cet article relativement court, nous examinerons certains des problèmes courants auxquels les développeurs sont confrontés et comment les résoudre. Il ne s'agit pas de détails d'implémentation spécifiques pour un composant visuel spécifique. Au lieu de cela, la liste se concentre sur les processus de pensée, l'architecture et les approches.

La complexité CSS

Le CSS est-il difficile? Non! Certainement pas, il a quelques règles structurelles très basiques. Vous avez des sélecteurs (classe, id, élément), vous avez des propriétés et vous avez la portée. C'est bien moins qu'un langage comme C, Java ou PHP. Un développeur peut avoir l'idée complète en quelques minutes de lecture et de mise en forme. Bien sûr, pour connaître la différence entre margin et padding, vous pouvez jeter un œil à w3schools, mais quand l'utiliser, ce qui demandera un peu d'expérience. Mais ce n'est pas sorcier.

Maintenant, ce qui rend les choses un peu plus complexes, ce sont toutes les façons dont les sélecteurs font la course pour écraser la suivante, et comment une propriété en affecte une autre (display: block vs display: inline par exemple). Ensuite, nous avons des détails plus petits comme la réduction des marges, l'empilement des z-index, les propriétés de performances GPU vs CPU, le modèle de boîte et les propriétés de typographie.

En plus de tout cela, de nouvelles fonctionnalités CSS qui ne sont pas toujours implémentées de la même manière dans les navigateurs, certaines ne le sont même pas du tout et d'autres nécessitent des propriétés différentes.

Si nous regardons les deux paragraphes ci-dessus, nous verrons les deux étapes principales que les développeurs front-end frappent lorsqu'ils travaillent avec CSS - L'un est le « Oh, c'est tout? »Et le second est« Oh ****, ce n'était pas tout ». C'est ce que signifie «Complexité CSS»

Il y a beaucoup de petites choses entrelacées qui sont difficiles à mettre à l'échelle. Si vous ne construisez qu'un seul composant, c'est facile: vous stylisez tout ce que vous voyez et cela fonctionne. Mais mettez ce composant unique dans une application plus grande et des styles supplémentaires seront appliqués. Vous pourriez vous retrouver avec la même classe que quelque chose d'autre (comme .button) et vos styles seront appliqués dans toute l'application, cassant tout. C'est stressant!

WordPress CSS: Guide de base pour les débutants

Comment écrire du CSS: lutter contre sa complexité

Il y a quelques solutions que les gens intelligents ont proposées, un aperçu serait:

• Conventions de dénomination CSS comme BEM, SMACSS et autres, qui définissent des règles de noms de classe qui réduiraient la possibilité de conflits.
• CSS dans JS est une méthode plus récente qui vous permet pratiquement d'écrire des composants CSS dans des fichiers JS (sonne mal, semble mauvais, mais cela a du sens au moins). Principalement valable avec React, Vue et autres.
• Les modules CSS sont une approche plus sensée du CSS dans JS pour quelqu'un qui se retrouve avec tous les styles dans un seul fichier. Les modules CSS encapsulent les styles de chaque composant afin qu'ils ne puissent pas s'infiltrer dans d'autres composants, ce qui facilite la réutilisation. Cela réduit également beaucoup le stress!

La première - les conventions de dénomination est probablement la plus difficile à mettre en œuvre car elle ne dispose d'aucun outil pour vous aider. En tant que développeur, il vous appartient de comprendre et d'appliquer la convention. Il faut encore penser aux noms de classes, ils ne devraient toujours pas entrer en conflit et ensuite il faut que toute l'équipe les suive. Assez difficile!

CSS dans les modules JS et CSS sont des correctifs d'implémentation. Ils modifient la sortie du code dans son ensemble, ce qui rend pratiquement impossible la fuite de styles. Mais ils nécessitent une réflexion et une configuration de construction complètement différentes, ce qui n'est pas toujours faisable ou souhaité.

Le meilleur conseil ici serait: Étudiez les conventions de dénomination les plus courantes et les plus réussies, utilisez celle qui correspond aux normes de codage de votre entreprise ou de votre écosystème. Comprenez la séparation des composants et commencez à penser en termes de portée et d'unités singulières qui créent une grande application. Pas une grosse application dès le départ, ce serait impossible à gérer.

Si vous travaillez sur une pile qui inclut une bibliothèque comme React ou un framework comme Vue, alors recherchez des outils supplémentaires qui vous permettent de gérer vos styles avec eux. Pour tout développeur CSS de niveau débutant à intermédiaire, ils seraient d'une grande aide! Et vous ne voudrez peut-être jamais les abandonner à moins que quelque chose de mieux ne vous arrive.

Gardez un œil ouvert sur les nouveaux outils! Ils nous empêchent de lutter contre les problèmes que la communauté des développeurs a déjà trouvés, corrigés et fourni un moyen de les résoudre.

Maintenant que nous avons décrit ce que signifie la complexité CSS et quelques conseils de démarrage pour la combattre, plongeons-nous dans un aperçu plus détaillé et fournissons des exemples directs.

Conseils de conception de sites Web: comment améliorer votre jeu dans la conception de sites Web

Neuf signes d'un mauvais CSS

Cette liste n'est certainement pas complète, pas de loin. Malheureusement, vous ferez face à d'innombrables autres problèmes et, espérons-le, trouver des solutions directes à un problème spécifique sur des sites comme Stackoverflow.
Cependant, si vous souhaitez améliorer votre jeu, lorsque vous résolvez un problème avec quelques lignes de CSS, vous devez comprendre ce qu'elles font. Pourquoi avez-vous dû changer votre balisage et pourquoi avez-vous dû changer quelques sélecteurs, propriétés?

Les marges agissent étrangement

Un problème courant auquel les développeurs sont confrontés est lorsque deux éléments n'additionnent pas leurs marges (haut / bas). Par exemple, nous avons deux éléments <p> avec une marge: 20px 0 ;. L'espace total entre eux est de 20 px et non de 40. Cela est dû à la réduction des marges. Sauf si les éléments flottent ou sont absolument positionnés. Cet «sauf» est presque partout pour presque toutes les définitions.

Z-index: 9999999 et toujours pas au-dessus de z-index: 1

Tout d'abord, il est rarement nécessaire d'écrire des z-index aussi élevés. J'ai même vu des valeurs comme 99999999999999 ou plus. Tout d'abord, la valeur max de l'index z est 2147483647, donc tout ce qui précède est inutile. Deuxièmement, ça ne marche pas comme ça. Les éléments qui se trouvent au-dessus sont définis par le contexte d'empilement, pas seulement par la valeur z-index. Voir le graphique ci-dessous:

Ne pas animer les bonnes propriétés

C'est une question assez simple, mais certains développeurs ont du mal en ce qui concerne les animations et l'approche à adopter. Tout d'abord, que peut-on animer? Tout ce qui peut avoir une valeur de départ, une valeur finale et tout ce qui se trouve entre les deux. L'opacité est une telle propriété, vous pouvez commencer à partir de 0, terminer sur 1 et ajouter des étapes infinies entre 0,3, 0,6758, 0,9875, etc. Vous ne pouvez pas animer «affichage» car il n'y a pas d'étapes intermédiaires entre l'inline et la grille.

Animations inefficaces

La raison la plus courante d'un mauvais FPS sur les animations est due aux mauvaises propriétés animées. Si vous modifiez la propriété «gauche» d'un élément absolu, vous utiliserez le processeur pour calculer. Cependant, si vous utilisez la transformation, ce serait le GPU. Et le GPU, comme nous le savons tous, est préférable de faire des graphiques.

Mais comment animeriez-vous l'ombre, alors qu'elle n'a pas d'alternative comme left / transform? Eh bien, animez l'opacité! Avoir deux éléments, un avec start, state, un avec end state. Puis fondre le début et la fin. Cela donnerait l'impression que l'ombre se dilate, alors qu'en fait elle ne fait que disparaître.

N'animez PAS les éléments qui affectent la mise en page si possible. Les calculs de disposition sont coûteux et un processeur ne peut effectuer qu'un nombre limité de calculs. Souvent, moins d'un toutes les 16 ms, ce qui entraînera des FPS inférieurs à 60.

Sélecteurs trop profonds

Qu'est-ce qu'un modificateur? Une classe, que vous pouvez ajouter à une autre classe et remplacer certaines de ses propriétés. Exemple: le bouton. A la couleur: rouge. .button-primary, a la couleur: bleu. Ainsi, lorsque vous ajoutez .button-primary à .button, vous voulez finir avec une couleur bleue. Peasy facile. Bien que ce ne soit pas toujours aussi facile. Et pas à chaque fois que c'est un composant comme celui-ci.

Parfois, on souhaite écraser un composant, enfant d'un autre composant sur une page spécifique. On aboutit donc à quelque chose comme ceci: .page-name .section-name .component-1 .component-2 {…} Déjà quatre niveaux de profondeur. Mais il s'avère que nous pouvons simplement faire .page-name .componen-2 {…}. Plus court, c'est mieux! Parce que s'il arrive que pour une raison quelconque, vous deviez écraser ce nouveau style, vous n'avez pas besoin d'aller sur 5 niveaux, puis 6, puis plus.

Les sélecteurs profonds sont effrayants et les gens finissent par utiliser! Important. ! important doit être utilisé lorsque vous souhaitez écraser des styles en ligne sur lesquels vous n'avez aucun contrôle. Sinon, c'est un signal d'alarme que vous ne faites pas quelque chose de bien.

Fichier trop volumineux

Maintenant, bien sûr, pour une grande application, il y aurait beaucoup de styles, et c'est tout à fait compréhensible. Mais est-ce toujours aussi grand? Une mauvaise façon d'étendre les classes dans SASS (via des mixins) générerait de grandes chaînes de sélecteurs, qui prendraient quelques secondes pour faire défiler pour les voir toutes. Une extension appropriée réduirait beaucoup ce fichier. Pourrait même doubler la taille.

Les frameworks inclus, dont seules quelques propriétés sont utilisées, sont également une raison courante pour les fichiers volumineux. Regroupez bootstrap / foundation, font-awesome, animate.css et quelques autres frameworks / bibliothèques similaires et vous vous retrouvez avec un fichier énorme dont vous utilisez environ 2%. Nettoyez, gardez-le bien rangé et n'utilisez que ce qui est vraiment nécessaire. Souvent, il n'y a même pas besoin d'un cadre.

Framework quand il n'est pas nécessaire

Bootstrap, Foundation, UIKit et tous les autres frameworks sont super! Ils résolvent un problème réel et sont extrêmement précieux pour la communauté de développement Web. Il n'est pas nécessaire de bien connaître HTML ou CSS pour créer des tableaux de bord et des sites. Mais éloignez-vous de ce cas, commencez à écrire du CSS et vous rencontrerez quelques problèmes.

• Vous devez bien comprendre comment les construire et comment les inclure
• Vous devez lire leur documentation pour trouver les paramètres personnalisés et les mixins qu'ils fournissent.
• Vous devez suivre leur balisage et apprendre à votre équipe à le faire.
• Vous devez vraiment comprendre comment étendre et styliser pour créer une vue unique.

Les inclure correctement signifie que vous n'utilisez que ce dont vous avez besoin. Pour qu'un tel cadre vous aide au lieu de vous interdire de créer quoi que ce soit de personnalisé, vous devez savoir que son fonctionnement interne est meilleur que la moyenne. Et pour réaliser une conception personnalisée, vous devrez modifier les paramètres et les propriétés. Et puis écrivez du CSS personnalisé. Et ce CSS personnalisé pour écraser tout ce que le framework donne.

Donc, s'il n'y a pas vraiment besoin d'un tel framework CSS, mais qu'il en existe toujours un et qu'il n'a pas été utilisé correctement, c'est un signal d'alarme indiquant que quelque chose ne va pas. Et lorsque vous commencez une fois avec, vous finirez probablement par l'utiliser jusqu'à la fin du cycle de vie du projet. C'est donc une décision importante.

Ne pas autoriser le contenu à définir la taille

Celui-ci est plus un problème de niveau débutant, mais c'est un problème très courant. Vous devez donner au contenu la liberté qu'il mérite.

Par exemple, vous ne souhaitez pas définir la propriété width du site sur 1 200 px. Vous souhaitez définir la largeur maximale sur 1200 px. De cette façon, la fenêtre d'affichage permettra à votre site de rester réactif.

Ensuite, un champ de saisie ne doit pas avoir une hauteur de 40 px, il doit avoir un remplissage de 1em. Maintenant, la taille de la police, le contenu est ce qui définit la taille. Et si le contenu à l'intérieur augmente, l'élément ne se cassera pas.

Cette façon de penser lors de la définition des tailles reste importante dans toute l'application. Et chaque propriété doit en tenir compte. Idéalement, ne définissez pas% pour la largeur de la zone de contenu, car vous devez également écrire des requêtes multimédias.

Si vous aviez une largeur maximale, lorsque votre navigateur se rétrécit sous cette largeur maximale, le contenu remplira la largeur du navigateur, puis se rétrécira normalement. Sinon, vous devrez écrire une requête multimédia pour cette taille. Et puis pour tout autre format personnalisé écrit sur le site. C'est la complexité ajoutée en raison de la mauvaise approche. Presque le même que tous les autres points dont nous avons déjà discuté.

Hacks JavaScript

JavaScript peut faire des merveilles! Mais ce n'est pas toujours nécessaire. Vous pouvez faire beaucoup avec juste CSS qui est bien pris en charge, qui ne nécessite pas de fonctionnalité (il est préférable de tester automatiquement par la suite) et qui n'exige pas que vos autres membres FE connaissent également JS.

Bien sûr, il y a la fonctionnalité bascule standard, où vous pouvez utiliser une entrée de case à cocher pour changer les styles lorsque: cochée, il y a la superposition d'arrière-plan qui peut être facilement déclenchée et il y a des propriétés comme counter pour créer plus que de simples listes <ol> .

Le conseil ici est de rechercher d'abord les solutions CSS. Disons que vous souhaitez créer une fenêtre contextuelle. Il apparaît au milieu (position: fixe). Ensuite, vous voulez le fermer à partir de l'icône [X] ou lorsque vous cliquez autour de lui. Dans JS, vous auriez besoin d'écrire des événements qui se déclencheraient sur tout sauf le contenu de la fenêtre contextuelle. Mais toujours déclencher sur le [X] qui est dans le contenu de la popup.

Au lieu de cela, à partir de CSS, vous pouvez simplement écrire un autre <div> qui a 100vw, 100vh taille et z-index juste sous la fenêtre contextuelle. Ensuite, vous pouvez simplement cibler cette div dans JS, qui est une ligne unique.

Un autre exemple - vous voulez un bouton que vous pouvez placer dans le contenu, qui «développera» tout contenu qui le suit. Simple avec CSS, un peu plus complexe avec JS. Avec CSS, vous pouvez faire quelque chose comme ceci:

 Label.button - stylise le bouton visuellement.

 Input: not (: checked) ~ * {display: none} - cache tout ce qui suit dans le même conteneur.

Ce bit «dans le même conteneur», vous avez besoin d'une logique personnalisée dans JS. Vous devez également sélectionner tous les éléments, ce qui nécessite de parcourir l'arborescence DOM. Et puis appliquez-leur des styles CSS, ce qui aboutirait à la balise style = ””, ce qui nécessiterait à son tour! Important si pour une raison quelconque vous devez les résoudre. EN CSS, heureusement, c'est extrêmement simple.

La voie pour devenir un bon concepteur Web

Conclusion

Comme vous pouvez le voir, ce sont très peu de problèmes courants. Pour les couvrir tous, un livre serait nécessaire. Mais j'espère qu'ils vous donneront un bon point de départ et vous rappelleront de penser à tout problème potentiel qui pourrait survenir en raison d'une mauvaise approche. Localiser de tels problèmes s'accompagne d'une tonne d'expérience et de nombreuses lectures. Et si vous êtes arrivé à la conclusion ici, alors vous êtes sur la bonne voie avec la lecture, il est maintenant temps de pratiquer!