Depuis que je suis sur Twitter (vous pouvez me suivre), j’ai l’occasion de lire plus d’articles sur le Web qu’auparavant et notamment quelques uns sur les CSS. Je vous livre donc mes découvertes et réflexions du moment.
CSS sur une ligne
Single line CSS en anglais. C’est le concept qu’il est mieux d’écrire ses CSS sur une seule ligne plutôt qu’en bloc. Par exemple en bloc :
ul li {
list-style:none;
border:1px solid black;
font-weight:bold;
}
dl dt {
width:800px;
}
donnerait sur une ligne
ul li{list-style:none;border:1px solid black;font-weight:bold;}
dl dt{width:800px;}
Le grand avantage c’est que ça réduit le poids du fichier CSS (assez significativement d’ailleurs, même si ça n’a pas grande influence sur le poids total d’une page Web), et ça évite de scroller des heures pour arriver à la fin du fichier. L’énorme inconvénient c’est que c’est moins lisible. C’est vrai, mais j’ai testé et en fait pas tant que ça. Pour ma part je pense que je vais adopter une sorte de mix : CSS sur une ligne, et CSS en bloc pour les lignes trop longue. Sans oublier de commenter les différentes parties du code, on n’est pas à 10 lignes près quand même !
Quelques exemples
- Single Line CSS
- Exemple de feuille CSS très propre
Éviter les espaces superflues
Dans le même genre, histoire de grappiller quelques octets, c’est vrai que ça ne sert à rien de rajouter des espaces entre une propriété et sa valeur, une balise et l’accolade qui la suit. Bref, je suis pour d’enlever les espaces superflues ! Mais quand même, un espace entre chaque propriété quand on écrit en ligne : c’est cool pour les yeux !
Enlever les les sélecteurs
CSS superflues D’après PageSpeed (un outils de Google pas mal du tout pour tester la rapidité de ses pages Web), il serait avantageux de réduire au maximum la liste des sélecteurs CSS. Prenons l’exemple suivant :
#menu ul li{font-weight:bold;}
Préciser l’élément ul est en général superflue puisque pour un cas classique, il n’y aurait pas de li en dehors d’un ul dans #menu. Il vaudrait donc mieux écrire :
#menu li{font-weight:bold;}
Et je dis : ouais, ça se tient ! ça réduit la taille du fichier CSS, améliore la lecture du fichier, et il y a des chances que cela facilite le travail de l’interpréteur de CSS. Attention tout de même à ne pas tailler à l’arrache dans le CSS, certains sélecteurs sont utiles !
C’est tout pour aujourd’hui !
Mise à jour 2 ans plus tard : de nos jours, on cherche toujours plus à grappille des octets ! Par contre, on évite absolument de faire ce que je propose ! On écrit son code CSS aussi humainement que possible, puis on génère à partir de ce code, un feuille de style minifiée à laquelle tous les espaces inutiles, ainsi que les commentaires, auront été retirés. Certains vont même jusqu’à utiliser un langage plus haut niveau que CSS (acceptant des variables par exemple), puis le faire passer à la moulinette d’un pré-processeur (SASS, LESS, … chacun ayant son mini-langage) qui génère une feuille de style minifiée et optimisée pour le traitement par le navigateur.
2 Responses to Booster ses CSS