Anatomie d'une base de règles

Avant de discuter comment écrire nos bases de règles, familiarisons-nous avec la terminologie en vigueur :

[selector] {
  [property]: [value];
  [<--declaration--->]
}

Par exemple:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

Nous pouvons voir ici que nous avons :

1. des sélecteurs related sur la même ligne; des sélecteurs unrelated sur de nouvelles lignes;
2. un espace avant l'opening brace ({);
3. des propriétés et valeur sur la même ligne;
4. un espace après le double-point délimitant propriété et valeur;
5. chaque déclaration sur sa propre ligne;
6. un opening brace ({) sur la même ligne que notre dernier sélecteur;
7. notre première déclaration sur une nouvelle ligne juste après l'opening brace ({);
8. le closing brace (}) sur sa propre nouvelle ligne;
9. chaque déclaration indenté de deux espaces;
10. un point-virgule on our last declaration.

Ce format semble être un standrad universel (excépté les variations dans le nombre d'espaces, avec une majorité choisissant d'en utiliser deux.

De cette manière, ce qui suit serait incorrect :

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

Les problèmes ici incluent :

1. des tabs au lieu d'espaces;
2. unrelated selectors on the same line;
3. the opening brace ({) on its own line;
4. the closing brace (}) does not sit on its own line;
5. the trailing (and, admittedly, optional) semi-colon (;) is missing;
6. no spaces after colons (:).