Nommage et formatage

À priori, nommer des éléments peut sembler facile. Par exemple, voici trois noms de classes: .truc, .patente et .chose. Pourquoi ces noms? 🤷‍♂️

Théoriquement, nous pouvons donner n'importe quel nom à nos classes sans affecter le fonctionnement de notre code.

Cependant, imaginez si vous deviez embarquer sur un projet. (Écrit par quelqu'un d'autre ou par vous-même il y a longtemps.) Vous fait un survole du CSS et vous voyez ces classes .truc, .patente, .chose…

Bonne chance pour comprendre!

Si à l'opposé ces classes étaient nommées: .grille, .carte et .titre leurs rôles et relation, serait soudainement plus évident. D'où l'importance de donner des noms représentatifs.

There are only two hard things in Computer Science:
cache invalidation and naming things

— Phil Karlton Développeur chez Netscape et solide moustachu

Cohérence

Il existe plusieurs façons de nommer ses classes.

Par exemple:

  • .MaClasse { ... }

  • .maClasse { ... }

  • .ma-classe { ... }

  • .ma_classe { ... }

  • etc.

Le tout devient rapidement mélangeant si l'on se met à jongler avec ces différentes possibilités. Il est donc fortement encouragé de s'en tenir à une seule approche.

👍

Au moment d’écrire ces lignes, le modèle le plus répandu est celui en miniature où les espaces sont remplacés par des tirets.
ex: .ma-classe { ... }

Formatage

Un code bien formaté est un code facile à lire et surtout facile à déboguer!

Voici quelques règles de base.

Accolades

Un espace entre le sélecteur et l'accolade ouvrante devrait toujours être présent et elle devrait être suivi d'un retour de chariot Enter ↵ afin de simplifier la lisibilité du code.

Quant à elle, l'accolade fermante devrait être seule sur la ligne suivant la dernière propriété et sont indentation devrait correspondre à celle de son sélecteur. Une ligne vide devrait ensuite la suivre afin de délimiter proprement chaque bloc.

👌

.carte {
  display: block;
  width: 100%;
}

🚫

.carte{display: block;
  width: 100%;}

Espaces

Lorsque vous écrivez vos propriétés, elles devraient normalement être indentées à l'intérieur de vos accolades

👌

sélecteur {
  propriété: valeur;
}

🚫

sélecteur {
propriété: valeur;
}
👍

Actuellement, deux espaces est l’indentation la plus courante en CSS.

L'important est de garder une indentation cohérente d'une ligne à l'autre.

👌

.carte {
  display: block;
  width: 100%;
  padding: 20px;
}

🚫

.carte {
  display: block;
width: 100%;
    padding: 20px;
}

Formatage automatique

VsCode

Lorsqu'un code est sélectionné, VsCode permet de le formater automatiquement à l'aide d'un raccourcis clavier:

  • Windows: Shift + Alt + F

  • Mac: Shift + Options + F

CodePen

Dans l'entête de chacune des fenêtres (HTML, CSS, JavaScript) se trouve un chevron pointant vers le bas ⌄. Cette icône donne accès aux différentes options de la fenêtre. Parmi elles se trouve "Format" permettant de formater votre code automatiquement.