CSS Multilignes

Le CSS devrait être écrit sur plusieurs lignes, à l'exception de circonstances très spécifiques. Il existent de nombreux bénéfices à cela :

1. Des chances réduites de voir apparaîtres des merge conflicts, car chaque fonctionnalité existe sur sa propre ligne.
2. diffs plus ‘truthful’ et fiabkes, car chaque ligne ne contient jamais qu'un seul changement.

Les exceptions à cette règle devraient être assez apparentes, comme des bases de règles similaires ne contenant qu'une seule déclaration chacune, par exemple :

.icon {
  display: inline-block;
  width:  16px;
  height: 16px;
  background-image: url(/img/sprite.svg);
}

.icon--home     { background-position:   0     0  ; }
.icon--person   { background-position: -16px   0  ; }
.icon--files    { background-position:   0   -16px; }
.icon--settings { background-position: -16px -16px; }

Ce type de bases de règles bénéficient d'être sur une unique ligne car :

1. elles se conforment toujours à la règle du une-seule-raison-de-changer;
2. elles partagent suffisamment de similarités pour ne pas nécessité d'être lues entièrement comme les autres bases de règle—il y a plus de bénéfices à pouvoir lire leur sélecteurs, qui sont plus intéressant dans la majorité des cas.