Optimiser un fichier .CSS

J'ai lu certains des bouquins incontournables tels que cités suyr ce site pour les CSS, et j'ai cependant une petit question: en effet on se sert des css pour optimiser la taille de nos pages web (et pour bien d'autres choses plus excitantes ) mais comment optimiser nos fichiers CSS? J'imagine que si l'on construit nos feuilles de styles en suivant les evangiles des Meyer, Goetter et Zeldman, on peut s'en sortir mais bon voila je ne suis pas tres pieux et je soupçonne mon fichier CSS principal d'etre un petit fouilli mal dégrossi?

Quelques bonnes pratiques pour optimiser la taille de mon CSS et le rendre claire au cas ou je passe le site web à un autre?

kunfrydev a écrit :
Quelques bonnes pratiques pour optimiser la taille de mon CSS et le rendre claire au cas ou je passe le site web à un autre?

Il n'y a pas vraiment de besoin net de limiter la taille des feuilles de style. Celles-ci dépassent rarement les 10 Ko, par exemple (et là 10 Ko c'est vraiment pas mal), et ne sont chargées qu'une seule fois puis mises en cache.

À l'inverse, tu auras sûrement des images de mise en forme qui feront 4Ko, 8Ko… 30 Ko. La priorité n'est donc pas de réduire une feuille de style de 10Ko à 5Ko.

Maintenant, ça ne veut pas dire que l'argument comme quoi les CSS réduisent la taille des pages est erroné ! Les CSS sont conçues de telle sorte qu'un jeu de propriétés peut s'appliquer à plusieurs éléments à la fois, ce qui n'était pas possible ou difficile en HTML « tag-soup ». Donc une page de 10 Ko de contenu peut faire 10Ko+10Ko avec une feuille de style CSS, et 50Ko avec du HTML sans CSS (pour un rendu comparable, bien sûr, et pour peu que la mise en page soit un peu complexe).
De plus, à la deuxième page chargée, c'est juste 10Ko pour du HTML+CSS (le CSS est déjà en cache), mais à nouveau 50Ko pour du HTML sans CSS.
Donc oui, les CSS bien utilisées réduisent la taille des pages.


Si tu dois ressentir le besoin d'épurer tes feuilles de style, ça ne sera pas à cause de problèmes de bande passante, mais pour la raison suivante :
– un code plus court (qui combine les sélecteurs et utilise à bon escient la cascade CSS, par exemple) est un plus rapide à écrire ;
– un code mieux organisé (structuré, avec des commentaires si besoin) est plus facile à écrire (on se perd moins dedans au cours de la rédaction) ;
– un code bien organisé est facile à reprendre plusieurs mois ou années plus tard, ou à faire reprendre par une autre personne.
Bref, des règles de base qui ne s'appliquent pas qu'aux langages informatiques.

Garder aussi en mémoire que les noms des classes et identifiants utilisés dans les pages web ou les template d'un site, s'ils sont évocateurs et rappelle la fonction de l'élément à styler, seront plus faciles à exploiter : on n'aura pas besoin de revenir systématique au HTML pour se rappeler quelle classe s'applique à quel élément.

mpop a écrit :

Il n'y a pas vraiment de besoin net de limiter la taille des feuilles de style. Celles-ci dépassent rarement les 10 Ko, par exemple (et là 10 Ko c'est vraiment pas mal), et ne sont chargées qu'une seule fois puis mises en cache.

À l'inverse, tu auras sûrement des images de mise en forme qui feront 4Ko, 8Ko… 30 Ko. La priorité n'est donc pas de réduire une feuille de style de 10Ko à 5Ko.

Maintenant, ça ne veut pas dire que l'argument comme quoi les CSS réduisent la taille des pages est erroné ! Les CSS sont conçues de telle sorte qu'un jeu de propriétés peut s'appliquer à plusieurs éléments à la fois, ce qui n'était pas possible ou difficile en HTML « tag-soup ». Donc une page de 10 Ko de contenu peut faire 10Ko+10Ko avec une feuille de style CSS, et 50Ko avec du HTML sans CSS (pour un rendu comparable, bien sûr, et pour peu que la mise en page soit un peu complexe).
De plus, à la deuxième page chargée, c'est juste 10Ko pour du HTML+CSS (le CSS est déjà en cache), mais à nouveau 50Ko pour du HTML sans CSS.
Donc oui, les CSS bien utilisées réduisent la taille des pages.


Si tu dois ressentir le besoin d'épurer tes feuilles de style, ça ne sera pas à cause de problèmes de bande passante, mais pour la raison suivante :
– un code plus court (qui combine les sélecteurs et utilise à bon escient la cascade CSS, par exemple) est un plus rapide à écrire ;
– un code mieux organisé (structuré, avec des commentaires si besoin) est plus facile à écrire (on se perd moins dedans au cours de la rédaction) ;
– un code bien organisé est facile à reprendre plusieurs mois ou années plus tard, ou à faire reprendre par une autre personne.
Bref, des règles de base qui ne s'appliquent pas qu'aux langages informatiques.

Garder aussi en mémoire que les noms des classes et identifiants utilisés dans les pages web ou les template d'un site, s'ils sont évocateurs et rappelle la fonction de l'élément à styler, seront plus faciles à exploiter : on n'aura pas besoin de revenir systématique au HTML pour se rappeler quelle classe s'applique à quel élément.

ma question n'avait pas pour postulat de base le caractere éronné de l'affirmation selon laquelle un bon css réduit la taille des pages web au contraire... mais bien au contraire, aprés avoir lu les bouqins des apotres meyer, zeldman et goetter, jai comme pour ainsi dire connu mon chemin de damas et je suis un zélateur du CSS...

Mon soucis de clarification/optimisation d'un css n'est du à la bande passante mais parce que je suis un manique de l'ordre et que je veux faire les choses proprment...

Et donc je prend à mon compte la troisieme partie de ton exposé... merci!
Modifié par kunfrydev (24 Jul 2006 - 17:26)

Par contre je ne dis pas que ce ne soit pas utile mais je n'arrive pas à mesurer l'importance et l'impacte de faire valider une feille de style?

quelles sont les cobséquences si on ne le fait pas?

Salut.

La validation de ta feuille de style, tout comme pour le code HTML, permet de t'assurer qu'elle ne contient pas d'erreurs, et que donc elle sera (ou en tous cas devrait) être interprétée de la même manière par tous les navigateurs.

Oui j'ai un site en ce moment qui a des problemes avec un seul navigateur IE5.5/Mac, je n'ai meme pas de mac a dispo pour travailler là-dessus peut etre que valider mon css fera du bien...

Quelqu'un a une idée sur le niveau d'utilisation de IE5.5/Mac... est il aussi utilisé ou plus utilisé que Safari sur mac ou firefox?

pour revenir à la validation CSS pourqui si peu d'auteurs de livres, articles et tutos insistent sur la validation des css?
Modifié par kunfrydev (24 Jul 2006 - 19:36)

kunfrydev a écrit :
Quelqu'un a une idée sur le niveau d'utilisation de IE5.5/Mac... est il aussi utilisé ou plus utilisé que Safari sur mac ou firefox?

IE5 Mac n'est plus distribué par Microsoft depuis la fin de l'année 2005. Microsoft conseille l'utilisation de Safari pour la plateforme Mac.

Au niveau des parts d'utilisation, il me semble que Safari est au dessus de IE5 Mac, lui-même devant Firefox. Mais pour les chiffres exacts…

Amha, c'est surtout la qualité de la conception qui te permettra de diminuer le poids de ta feuille de style.

L'exemple type est le suivant :

/** ici tous les liens ont des propriétés communes **/
#menu a{
background-position: 0% 0px;
position:absolute;
width:194px;
height:29px;
top:15px;
}

/** et là on ajuste les propriétés particulières à chaque lien du menu **/
#menu #edito {
background:url("edito.gif") no-repeat;
left:40px;
}

Si ton code XHTML est bien conçu, tu peux en quelque sorte "factoriser" tes propriétés, et alléger grandement ta feuille de style.
Par exemple, mes premières CSS faisaient de l'ordre de 10 Ko, et maintenant, j'arrive à faire des mises en pages plus complexes avec des CSS plus légères, de l'ordre de 5 à 6 Ko pour la CSS complète.

Après, ce sont des petites habitudes qui vont bien : utiliser #fc0 au lieu de #ffcc00 , quand tu définis des marges, utiliser plutôt margin:0 1em 2px 0; plutôt que de définir chaque marge, etc...

Bonjour,

Voici un article displonible sur le site Pompage :
« Écrire des feuilles de style efficaces », par Holly Bergevin et John Gallant

Voir également un outil comme CSS Tidy (ici en ligne)

Merci pour les conseils et effectivement l'article est pertinent, bon ej suis allé faire un peu de validation CSS sur w3c.org... Aucune erreur mais bon quelques avertissements dont le tres singlant "vous utilisez la meme valeur pour bordure et couleur de fond dans le contexte bla bla bla"... Je suis étonné parce que meme les plus gros concepteurs web utlisent souvent des cadres dont les bordures et l'arriere plan ont la meme couleur. Mais bon cet avertissement doit y etre pour une tres bonen raison, alors ce que je voudrais savoir c'est si il est en fait incorrect ou impropre sur le plan des standards d'utiliser la meme couleur pour les bordures et les arrieres plans?

kunfrydev a écrit :
Mais bon cet avertissement doit y etre pour une tres bonen raison, alors ce que je voudrais savoir c'est si il est en fait incorrect ou impropre sur le plan des standards d'utiliser la meme couleur pour les bordures et les arrieres plans?

Il est là pour une bonne raison : il peut s'avérer utile, si jamais il pointe vers une erreur de conception. Par contre, si ce qui est pointé par l'avertissement est voulu (et si on en connaît les conséquences), il suffit d'ignorer l'avertissement.

Note : les avertissements pour une validation HTML pointent souvent des petites erreurs de syntaxe. Les avertissements pour une validation CSS, par contre, sont parfois à ignorer. Le but n'est pas d'arriver à éradiquer les avertissements : il ne s'agit pas d'erreurs.

Voir aussi la FAQ : http://forum.alsacreations.com/faq/#item69

mais c'est quand meme une belle sensation de voir la petite boule verte quand on surf un site qu'on vient de terminer mais bon le site dont je parle est valide en XHTML 1.0 so it's ok!