28234 sujets

CSS et mise en forme, CSS3

Optimisation des CSS

J'ai 2 questions portant sur l'organisation de mes CSS.

---------- 1 ---------
Afin de réduire le poids de mes CSS, je les ai regroupé.

- au lieu de :

body {
   background-image:url(images/bg.gif);
   background-position:0 50px;
   background-repeat:repeat-x;
}


- j'écris :

body {
   background: url(images/bg.gif) repeat-x 0 50px;
}


Cet action répétée permet de réduire le poids de ma feuille de style tout en ayant le même affichage.

Pourtant je vois sur de nombreux sites que les styles sont plus proche de la solution 1 en général. Pourquoi? Quel est le bon choix ?




---------- 2 ---------

D'autre part, mon site actuel fait appel à une quinzaine de feuilles de styles.
J'appelle seulement une feuille base.css dans le head, les autres sont importées dans cette même feuille (@import).

Je voulais savoir si il vaut mieux dans un site charger toutes les feuilles de styles d'un coup (sachant que j'ai 8000 lignes de CSS) ou alors chargé la feuille de style spécifique à la page ?


Merci !
Pour la première question, j'utilise la méthode 1, plutôt par habitude qu'autre chose.

Sinon je pense qu'il vaut mieux appeler uniquement les css dont tu as besoin sur ta page. Rares doivent être les internautes qui visitent un site complétement donc inutile de faire le chargement de fichier qui ne serviront pas au final et qui alourdissent le temps de chargement.
Bonjour aussi...

Concernant la propriété background, elle est bien évidemment plus intéressante contractée que développée. Quand tu en as la possibilité, autant ne pas t'en priver.

Concernant ta question de réunir ou non les feuilles de styles, la question vient surtout du site. S'il s'agit de styles appelés sur toutes les pages du site, alors cela ne fera pas grande différence d'avoir une seule feuille, vu que tous les styles seront appliqués. S'il s'agit de styles spécifiques à certaines parties du site, à ce moment là ça peut valoir le coup, et encore... vu le poids léger d'une feuille de style, même de 8000 lignes.

Après, il peut s'agir de confort, donc à toi de voir si tu préfère scinder tes styles en différents fichiers. Personnellement je n'aime pas, car tu te retrouve toujours à switcher d'un fichier à l'autre, et au final tu t'y perds plus que quand c'est dans un seul et même fichier.
Administrateur
Bonjour et bienvenue, Smiley smile

bob_dylan a écrit :
Cet action répétée permet de réduire le poids de ma feuille de style tout en ayant le même affichage.

Pourtant je vois sur de nombreux sites que les styles sont plus proche de la solution 1 en général. Pourquoi? Quel est le bon choix ?

J'utilise systématiquement les propriétés raccourcies background et border parce qu'elles reviennent suffisamment souvent dans le code pour que j'aie fini par les apprendre par coeur. À l'inverse, font me sert tellement peu que soit je fais un copier-coller dans le sélecteur body en début de fichier soit j'utilise font-family, font-truc, ... Et en général seul font-size change beaucoup, pas la fonte, l'interligne et le reste si on veut un design un petit peu homogène !

Pourquoi la solution 2 ? Parce que leurs rédacteurs ne connaissent pas ou que c'est généré par Dreamweaver ou autre outil d'encore moins bonne qualité ...


bob_dylan a écrit :
D'autre part, mon site actuel fait appel à une quinzaine de feuilles de styles.
J'appelle seulement une feuille base.css dans le head, les autres sont importées dans cette même feuille (@import).

Je voulais savoir si il vaut mieux dans un site charger toutes les feuilles de styles d'un coup (sachant que j'ai 8000 lignes de CSS) ou alors chargé la feuille de style spécifique à la page ?

- @import oblige le navigateur à attendre d'avoir chargé la 1ère feuille de style avant de savoir quelles sont celles à charger via @import . Si tu les charges directement dans la balise <head> tu gagnes une étape.
- travaille avec tes 8000 lignes de CSS en local (site de test) mais en production (le site en ligne) tu peux utiliser un "compresseur"/réducteur de poids comme http://www.cleancss.com/?lang=fr Attention aux options, certaines sont trop "agressives" et vont modifier l'affichage partout ou dans IE6 si par exemple l'ordre des sélecteurs et important ...
- tout charger ou selon le type de page ? Dépend du projet Smiley ohwell . Si la page d'accueil est très différente du reste du site et qu'elle doit se charger en un éclair, c'est le cas idéal où morceler tes feuilles de style. Si toutes tes pages se ressemblent même les formulaires bah tu vas perdre du temps à gérer plusieurs fichiers alors que mettre tout en cache à la première visite serait une bonne chose dès l'affichage de la seconde page.
- félicitations pour arriver à te retrouver dans 15 feuilles de style ! (ou merci Firebug pour voir la cascade CSS résultante et retrouver ses petits Smiley lol )
Merci Felipe !

Tes commentaires m'éclairent encore un peu plus dans la réflexion de réorganisation de mes CSS ! Smiley biggrin

a écrit :
(ou merci Firebug pour voir la cascade CSS résultante et retrouver ses petits lol )


Oui en effet, c'est mon outil fétiche ! Ils n'ont pas intérêt d'arrêter son développement ! Un gain de temps fou pour ma part!
Modifié par bob_dylan (02 Oct 2009 - 18:57)
Sujet clos
Aller à