Les Conventions CSS/HTML
Généralités
La feuille de style CSS est de préférence UNIQUE et appelée à l’aide d’un élément <link> dans la section <head>.
Il est important dans un projet que les développeurs adoptent un style d’écriture identique, cela favorise la relecture du code pour tout le monde et facilite grandement le débogage.
Il faut organiser le code de façon logique.
Commencer par les éléments du <body>, puis ceux du <header>, de la <nav> et du <footer>.
Pour une meilleure organisation, il est recommandé d’insérer des commentaires pour délimiter différentes parties et des annotations pour apporter des précisions.
Si un composant HTML comporte différents IDs et classes, il est préférable de les regrouper dans le fichier CSS.
Pour donner une couleur à un élément, on peut soit donner son nom, soit sont code hexadécimal. Il est conseillé d’utiliser le code hexadécimal car il est beaucoup plus rapide à charger.
En début de feuille de style, opter pour le modèle de boîte CSS3 (box-sizing:border-box)
Bonnes pratiques
Positionner les éléments en choisissant de préférence parmi ces méthodes, dans l’ordre :
Eviter les sélecteurs associés à la structure HTML, un élément doit pouvoir être ciblé quel que soit son conteneur ou son emplacement :
Séparer la structure de l’apparence dans les sélecteurs pour faciliter la factorisation.
Toujours tenter de rassembler les propriétés identiques (Factoriser)
Eviter d’écraser une règle par une autre.
Pour la redondance, utiliser des pré-processeurs.
Grouper les éléments par composants réutilisables.
Se limiter à 4 noms de classes maximum par élément HTML, s’il en faut d’avantage, faire une classe personnalisée.
Utiliser les propriétés raccourcies.
Indentation
Lorsque des classes similaires ne possèdent qu’un seul attribut, nous privilégions un affichage sur une seule ligne.
Lorsqu’une classe possèdent un certain nombre d’attributs, nous privilégions le retour à la ligne pour chaque attribut.
Attributs pour plusieurs classes
Dans le cas où nous souhaitons appliquer un attribut à plusieurs classes, nous avons deux façons de coder en fonction de l’utilisation des fonctions.
Lorsque nous avons besoin de les identifier simplement, nous utilisons un retour à la ligne :
Lorsque nous n’avons pas besoin d’identifier les éléments, nous n’utilisons pas de retour à la ligne :
Les espaces dans les attributs
Pour faciliter les copier-coller des navigateurs, nous intégrons un espace après les « : » mais pas avant.
De cette manière, si vous réalisez des tests avec votre navigateur, un simple copier-coller vous permet de le mettre dans votre fichier CSS.
Le nom des classes
Il est commun d’utiliser le Lower Camel Cas, l’underscore ou le tiret du 6 « -« . Il est toutefois de plus en plus courant d’utiliser uniquement le « – » pour distinguer le nom d’une classe CSS d’une variable PHP.
Pour le reste, les noms doivent être cohérents avec la fonction d’utilisation.
Source :
https://www.alsacreations.com/article/lire/1707-mini-convention-css.html
https://www.phpboost.com/wiki/conventions-html-et-css
https://graphiste.com/blog/bonnes-pratiques-css-feuille-style
