Sélecteurs

Préférez les classes plutôt que les noms de balises pour une performance de rendu optimale.

Évitez d'utiliser plusieurs attributs de sélecteur (e.g., [class^="..."]) sur des éléments apparaissant souvent dans la page. La performance du navigateur est impactée par ces sélecteurs.

Gardez vos sélecteurs courts et limitez le nombre d'éléments dans chaque sélecteur à trois.

Encadrez vos classes par le parent le plus proche uniquement lorsque cela est nécessaire (e.g., quand vous n'utilisez pas les classes préfixées).

/* Bad */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good  */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }