Aller au contenu

Code style

Les principes généraux du code style, les conventions de nommage (cases) et les règles pour HTML sont présentés en A07 - Code style (Principes généraux). Cette page reprend les règles communes (indentation, fin de ligne, encodage) et les complète par les règles propres à CSS.

Les règles générales de base (CSS)

✅ 2 espaces pour l'indentation du code (soft tab)

  • Uniformiser l'indentation pour éviter les différences lors des comparaisons de fichiers
  • Ne pas utiliser de tabulations (hard tabs)

✅ Pas d'espace en fin de ligne

✅ Terminer chaque fichier texte par un saut de ligne

✅ Tout le code CSS doit être écrit en minuscules : sélecteurs, propriétés et valeurs, hors contenu des chaînes de caractères (ex. 'Times New Roman')

✅ Encodage du fichier : UTF-8 sans BOM

  • BOM (Byte Order Mark) : caractère invisible que certains éditeurs ajoutent au tout début du fichier. Il est inutile en UTF-8 et certains outils ne s'y attendent pas.

✅ Une ligne vide entre deux règles CSS

✅ Un espace entre le sélecteur et l'accolade d'ouverture

✅ Plusieurs sélecteurs pour une même règle : un sélecteur par ligne, virgule , en fin de ligne

✅ Tiret - pour séparer les mots des noms d'id et de class (kebab-case)

✅ Dans un bloc, chaque déclaration (paire propriété-valeur) est sur sa propre ligne, terminée par un point-virgule ;

✅ Dans un bloc, les propriétés sont triées par ordre alphabétique

✅ Un espace après les deux-points : entre la propriété et sa valeur

✅ Apostrophes simples ' pour délimiter les chaînes de caractères (ex. 'Times New Roman', [type='text']), alors que les attributs HTML utilisent des doubles guillemets

✅ Les couleurs sont écrites en hexadécimal, en minuscules, et sous forme abrégée quand c'est possible (#ccc plutôt que #cccccc)

✅ Pas d'unité de mesure pour une longueur nulle (0 plutôt que 0px)

✅ Commentaires dans le code CSS utiles pour décrire et délimiter des groupes de règles

  • En anglais uniquement
  • Les lignes de commentaires ne dépassent pas 80 caractères

✅ Vérifier la validité du code avec le validateur du W3C : W3C - CSS Validation Service

Sources :

Exemple

/* ==========================================================================
   Section comment block (1 blank line before and after the comment)
   ========================================================================== */

html {
  background-color: #fafafa;
  font-family: 'Times New Roman', serif;
}

/* Sub-section comment block (1 blank line before and after the comment)
   ========================================================================== */

h1 {
  color: #ccc;
  font-size: 2rem;
}

/* Selector comment block */
#info-message,
.error-box {
  padding: 10px 0;
  width: 100%;
}

Tip

Discutez entre vous et avec moi si des règles ne sont pas clairement définies.

Configurez vos IDE pour appliquer automatiquement ces règles de formatage.

developer-motto.png

Source image

Stylelint

Un linter est un outil qui analyse le code source sans l'exécuter (analyse statique) pour détecter les erreurs, les incohérences de style ou les constructions suspectes.

Stylelint est un linter pour les feuilles de style CSS. Il aide à écrire du code CSS sans erreur, cohérent et maintenable, en vérifiant le code à l'aide d'un ensemble de règles prédéfinies ou personnalisées.

Caractéristiques principales

  • Règles configurables
    • Plus de 100 règles intégrées, à activer et à paramétrer selon les conventions de l'équipe.
    • Chaque règle peut être configurée en mode avertissement (warning) ou erreur (error).
  • Correction automatique
    • Stylelint peut corriger automatiquement une partie des problèmes détectés (option --fix), par exemple 0px → 0 ou #ffffff → #fff.
  • Automatisation
    • Utilisable en ligne de commande et dans des pipelines CI/CD : le code est alors vérifié automatiquement à chaque modification.
  • Extensions (plugins)
    • Possibilité d'ajouter des règles supplémentaires via des extensions communautaires.
  • Communauté
    • Projet open source maintenu par une communauté active.
  • Intégration IDE
    • Fonctionne avec la plupart des éditeurs et IDE (VS Code, IntelliJ IDEA, Sublime Text, etc.).
    • Affiche les erreurs en temps réel pendant la rédaction du code.

Sources :

➡️ Site web officiel

Prettier et Stylelint : deux outils complémentaires

  • Prettier met en forme le code : indentation, espaces, retours à la ligne, guillemets. Il ne juge pas de son contenu.
  • Stylelint signale les erreurs et le non-respect des conventions : propriété inconnue, couleur invalide, unité inutile sur 0, nom de classe qui n'est pas en kebab-case, etc.

Depuis sa version 16, Stylelint ne s'occupe plus de la mise en forme et recommande d'utiliser un outil comme Prettier en parallèle.

Source : Stylelint - Migrating to 16.0.0 (Removed deprecated stylistic rules)

Prettier, Stylelint et les règles CSS du cours

Aucun des deux outils n'applique à lui seul toutes les règles ci-dessus. Pour cela, il faut ajouter Prettier avec l'option singleQuote: true, Stylelint avec la configuration standard (stylelint-config-standard) et l'extension stylelint-order pour l'ordre alphabétique des propriétés.

Apostrophes simples

  • Avec sa configuration par défaut, Prettier remplace les apostrophes simples par des doubles guillemets ('Times New Roman' devient "Times New Roman").
  • L'option singleQuote: true conserve les apostrophes simples dans le CSS, sans changer les doubles guillemets des attributs HTML.

Règles appliquées par Prettier

  • Indentation de 2 espaces, suppression des espaces en fin de ligne, saut de ligne à la fin du fichier
  • Un sélecteur par ligne, une déclaration par ligne terminée par ;, espace après : et avant {
  • Couleurs hexadécimales et noms de propriétés en minuscules
  • Ligne vide entre deux règles : Prettier conserve une ligne vide existante, mais n'en ajoute pas

Règles vérifiées par Stylelint (et non par Prettier)

  • Ligne vide entre deux règles
  • Mots-clés en minuscules (red, et non RED)
  • Forme abrégée des couleurs (#fff, et non #ffffff)
  • Pas d'unité pour une longueur nulle (0, et non 0px)
  • Noms d'id et de class en kebab-case
  • Ordre alphabétique des propriétés, uniquement grâce à l'extension stylelint-order : Prettier ne trie jamais les propriétés

Règles à respecter soi-même

  • Commentaires en anglais, lignes de 80 caractères au plus

Stylelint signale aussi des problèmes absents de la liste du cours (ex. police sans famille générique) : lire le message et le nom de la règle indiquée pour comprendre la correction attendue.

Sources :