L'optimisation de votre CSS

Ce fameux langage qui nous sert à styliser notre page, prenez en soin ! Je ne vais pas déclarer  dans ce billet, toutes les propriétés CSS existantes, mais je vais vous parler,  de toutes les erreurs qu’on fait la plupart du temps et qui pourront  nuire à la performance de notre site.

Un Reset CSS ?

On le sait tous,  nos amis les navigateurs, ne sont pas parfaits. Chacun d’entre eux peut réagir différemment en fonction de votre CSS, et surtout Internet Explorer, hein..^^

Pour y remédier pensez à votre Reset CSS.

À quoi sert-il ? Tout simplement à réinitialiser à o la valeur de certains éléments HTML, afin d’éviter certains problèmes d’affichage sur les différents navigateurs.

Un Reset CSS super connu, celui d’ Eric Meyer guru du CSS, disponible ici : http://meyerweb.com/.

Pensez raccourci !

Ici par exemple je souhaite avoir une margin-left et margin-right de 50 px. Jusqu’ici tout va bien, mon code fonctionne. Seul bémol, on pourrait utiliser un raccourci css pour gagner 3 lignes de CSS,  voir l'exemple 2.

Vous allez me dire ce ne sont que 3 petites lignes, oui bien sur, mais si on cumule le nombre de lignes qui pourrait être raccourci, comme dans l’exemple ci-dessus, la performance d'affichage se fera ressentir. D’autres exemples :

Répétition superflu

J’applique souvent les mêmes propriétés pour plusieurs éléments. J’ai souvent plusieurs sélecteurs qui font le même job. J’ai eu tendance à faire ceci auparavant :

Alors que si on fusionne les deux on gagne énormément de ligne CSS :

Phobie de l’espace ?

Quand on veut à tout pris réduire la taille de son CSS pour une performance accrue, tous les espaces en trop dans votre CSS comptent !

Dans un premier temps, je suis d’accord que c’est plus agréable d’aérer votre CSS, pour une meilleure lisibilité. Mais dès que votre site sera en ligne, pensez à la minification de celui-ci.

Pourquoi je plébiscite la minification ?

C’est très simple à mettre en place et le gain de performance est important, un prochain tutoriel sera dédié à cette technique.

Utiliser une ou plusieurs feuilles de style ?

Alors ici, je vais être subjectif. Ce que je fais c’est assez basique, un CSS pour le site et autres pour les bugs IE6 & IE7. Chacun dans un répertoire.

Lorsque j’ai débuté j’utilisais un truc du genre similaire à ceci :

@import url("style.css");

@import url("ie6.css");

@import url("ie7.css");

@import url("police.css");

@import url("design.css");

Assez noob, je sais :)

Moi je vous conseille encore une fois de gagner en rapidité, et de ne pas charger 100 fichiers CSS pour afficher une page web.

Pour finir, construisez de façon logique votre CSS. Pensez à la fois prochaine, ou vous devriez revenir sur votre feuille de style.

Comme d’habitude, j’attends vos retours :)