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 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

VS Code

Lorsqu'un code est sélectionné, VS Code 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.

OUTIL CSS Beautifier Permets de corriger le formatage d’un fichier pour vous.