Code style

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

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

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

✅ Pas d'espace en fin de ligne

✅ Une ligne vide à la fin de chaque fichier texte

✅ Tout le code CSS doit être écrit en minuscules

✅ Encodage du fichier : UTF-8 sans BOM

✅ 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, chaque propriété est sur une nouvelle 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

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

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

✅ Commentaires dans le code CSS 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

✅ Vérifiez la validité du 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 aide à écrire du code CSS propre, cohérent et maintenable, en appliquant automatiquement un ensemble de règles prédéfinies ou personnalisées.

Un linter est un outil d'analyse de code qui détecte les erreurs, incohérences stylistiques ou constructions suspectes dans le code source.

Caractéristiques principales

• Règles configurables
  • Permet de choisir parmi des centaines de règles intégrées et de définir vos propres conventions.
  • Les règles peuvent être configurées en mode warning ou error.
• Correcteur automatique
  • Stylelint peut corriger certaines erreurs de formatage automatiquement, accélérant le développement.
• Automatisation
  • Intégration possible dans des outils de build (Grunt, Gulp, Webpack) ou dans des pipelines CI/CD.
• Plugins
  • Possibilité d'ajouter des règles supplémentaires via des extensions communautaires.
• Support communautaire
  • Projet open source soutenu par une large communauté active.
• Intégration IDE
  • Fonctionne avec la plupart des éditeurs et IDE (VS Code, IntelliJ IDEA, Sublime Text, Atom, etc.)
  • Affiche les erreurs en temps réel pendant la rédaction 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 appliquer automatiquement ces conventions de mise en forme.

Source image