Booster ses CSS

Publié dans HTML et CSS | Marqué avec ,
Share

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

É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 réponses à Booster ses CSS

  1. Bonjour,
    Pour ma part, pour gagner du poids et du temps pour le chargement des pages, il est préférable à mon avis de limiter les requêtes http (avec les sprites par exemple), les scripts et de les compresser et surtout d’optimiser le poids des images.Quand je code, je trouve les css en ligne pas très lisibles et quand on à 500 ou 1000 lignes en ligne, je trouve cela imbuvable.
    Enfin chacun ses goûts;)

  2. C’est clair que la réduction du poids des CSS n’est pas ce qu’il y a de plus utiles pour réduire le temps de chargement. Mais à bien y réfléchir 1000 lignes en ligne (:p) c’est plus facile à scroller que plus de 5000 en bloc. Pour ma part, je vais tester quelques temps pour voir ce que je préfère.

    Pour les sprites et l’optimisation du poids des images, j’approuve carrément. La compression des scripts je trouve ça plus ennuyant puisque ça complique leur édition.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*