Bonnes pratiques CSS

Les 7 commandements du CSS...

• Le box-sizing à border-box tu mettras (dans l'idéal initialiser le box-sizing à border-box une fois sur le root, puis inherit sur tous les autres éléments)
• Les !important et position: absolute tu éviteras (de manière générale, il y a toujours des cas où on en a besoin)
• Le style inline tu fuieras !! (et aucune pitié envers tes collègues tu auras !)
• Un style standardisé de focus tu mettras
• Un bon système tu installeras : une bonne gestion de la thématisation, une bonne architecture
• Un layout responsive aux media queries tu préferas (car les media queries sont trop fixées sur un breakpoint spécifique, et on a souvent plutôt envie d'avoir quelque chose de similaire aux container queries, c'est à dire dépendant de la largeur du composant et pas de la page)
• ✨ Des paillettes dans la vie des gens tu donneras ✨

Quelques autres bonnes pratiques

• favoriser les transitions aux animations
• favoriser rem au lieu de em, et les secondes au lieu des ms
• pour les couleurs utiliser HSL
• ne pas utiliser de <br>
• mettre la feuille de style css en haut pour qu'il se render progressivement
• Tester dans tous les navigateurs

Sélecteurs

• Le navigateur lit les sélecteurs de droite à gauche donc .class a {} est moins performant que a.class
• Sélecteur le plus performant est #id tout seul MAIS le mieux est d'utiliser les classes car :
  • Id ont une spécificité très haute, donc difficilement overriden
  • L'id doit être unique : compliqué à faire si on doit remplacer toutes les classes par des id
• éviter de surcharger les sélecteurs
• éviter l'override (au lieu de li et après li, faire li + li)
• Spécificité, dans l'ordre de celui qui va overrider tous les autres : inline style > id > class > element
• si un des sélecteurs est invalide, toute la règle ne sera pas appliquée (même si plusieurs sélecteurs dans la règle)
  • ex : .menu:hover, .menu:focus-within { }
  • si :focus-within n'est pas supporté, la règle entière ne sera pas appliquée
• Idées : préfixer les classes et les id utilisés en js par "js-" (exemple "js-tab-group-policies")

Sélecteurs par attributs

Source : The wasted potential of CSS attribute selectors d'Elise Hein

Avantages des sélecteurs par attributs :

• Plutôt que de créer une classe css pour un état/variant d'un élément, on pourrait directement utiliser son attribut ARIA ou pseudo sélecteurs
• Cela met en place un "a11y-first mindset"
• On peut avoir un ensemble de valeurs plutôt qu'un "booléen" (classe présente ou non)
• Exemples
  • input[disabled] au lieu de input.is-disabled
  • ou .nav-link[aria-current="page"] au lieu de .nav-link.nav-link--is-active
  • ou button[aria-expanded="true"] au lieu de button.is-expanded