Code style

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

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

Toujours uniformiser l'indentation : Cela évite des problèmes (par exemple lors de la comparaison de fichiers)
Pas de tabulation (hard tab)

✅ Pas d'espace en fin de ligne (trailing white spaces)

✅ Une ligne vide à la fin de chaque fichier texte

✅ Le code est écrit uniquement en minuscules (lowercase)

✅ L'encodage du fichier doit être UTF-8 sans BOM (encoding)

✅ Une ligne vide entre chaque bloc de règles

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

✅ Plusieurs sélecteurs pour un bloc sont chacun sur une ligne, séparés par une virgule ,

✅ Tiret - pour séparer les noms composés (id et class), aka kebab-case

✅ Dans un bloc, les propriétés sont chacune sur une nouvelle ligne, et chaque ligne se termine 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 : de la propriété et sa valeur

✅ Apostrophes (single quote) ' pour délimiter les chaînes de caractères

✅ Les couleurs sont écrites en hexadécimal et en minuscules

✅ Pas d'unité de mesure si la valeur est zéro

✅ Les commentaires dans le code CSS sont utiles pour décrire et délimiter des groupes de blocs de règles

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

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

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%;
}

Stylelint

Stylelint est un outil d'analyse statique (linter) pour les feuilles de style. Il vous aide à écrire du code CSS propre et cohérent en appliquant un ensemble de règles et de conventions prédéfinies ou personnalisables. Il est largement utilisé dans le développement web pour améliorer la qualité du code CSS.

Un linter est un outil d'analyse statique de code utilisé par les programmeurs pour trouver des erreurs, des bugs, des défauts stylistiques, et des constructions suspectes dans le code source.

Voici quelques caractéristiques de Stylelint :

Règles configurables : Stylelint permet aux développeurs de choisir parmi des centaines de règles intégrées pour créer un ensemble de règles correspondant à leurs besoins spécifiques. Vous pouvez activer ou désactiver des règles et ajuster le niveau de sévérité des règles individuelles (par exemple, avertissement ou erreur).
Correcteur automatique : Pour certaines règles, Stylelint offre la possibilité de corriger automatiquement les erreurs de style, ce qui permet de gagner du temps lors du processus de développement.
Automatisation : Il peut être intégré dans des processus de développement et des chaînes de build comme Grunt, Gulp, Webpack, ou des systèmes d'intégration continue pour automatiser la vérification de style.
Plugins : Si les règles intégrées ne suffisent pas, vous pouvez étendre les fonctionnalités de Stylelint avec des plugins qui apportent des règles supplémentaires ou des packs de règles.
Support de la communauté : Étant un projet open-source, il bénéficie du soutien et des contributions d'une large communauté de développeurs.
Intégration IDE : Stylelint peut être intégré à des éditeurs de texte et des environnements de développement intégrés (IDE) tels que IntelliJ IDEA, VS Code, Sublime Text, Atom, et d'autres pour fournir des retours en temps réel pendant que vous écrivez du code.

➡️ Site web officiel

Tip

Discutez ensemble et avec moi en cas de doutes, ou si des règles n'ont pas été clairement spécifiées.

Configurez vos IDE pour forcer/imposer ces règles de mise en forme dans votre code source.

🚨 À apprendre par cœur !

Source image