CSS et performance

Version imprimable

CSS et performance

J'aimerai connaitre le méthode la plus performante pour la mise en page de div possédant différents fils :

est-ce :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    <div id="bloc_pere">
       <div id="fils1"></div>
       <div id="fils2"></div>
        etc ...
    </div> 
 
et la definition des classes :
 
 #bloc_pere #fils1
 #bloc_pere #fils2
 etc...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    <div id="bloc_pere">
       <div id="b_p_fils1"></div>
       <div id="b_p_fils2"></div>
        etc ...
    </div> 
 
et la definition des classes :
 
 #bloc_pere
 #b_p_fils1
 #b_p_fils2
 etc...

merci #;-)

25/09/2007, 15h12
{F-I}

Aucun différence... (enfin je ne suis pas un expert en CSS, mais je ne pense pas avoir de la différence entre ces deux).

Tu peux choisir n'importe quel mot du moment que tu respecte les règles (pas de é ¨ù etc... dans les " ")

Cependant la deuxième méthode m'est péférable...
26/09/2007, 00h18
djoyeux

Si j'ai bien tout compris.

La premier est la mieux :) a mon avis.
Ton CSS sera plus propre donc sans doute interprété une fraction de seconde plus vite ;)
26/09/2007, 09h55
loop4

merci djoyeux, mais le probleme avec la seconde méthode, c'est que ca allourdi (en poids) le fichier css
26/09/2007, 12h42
djoyeux

ça allourdi de beaucoup ?

Remarque après ça depend de comment tu as construit le reste de ton CSS.
Le principal est que toi tu le comprennes...
27/09/2007, 12h13
BnA
Si je ne me trompe pas...

Dans ton premier exemple, les propriétés que tu définis pour #fils1 et #fils2 ne seront effectives que lorsque ces deux DIV (#fils1 et #fils2) se trouvent DANS #bloc_pere.

Par exemple, si jamais ton code ressemblait à ceci:
(Sans se préoccuper du fait que si tu répètes plusieurs fois le même élément, utilise des CLASS au lieu d'ID...)
Code:

1 2 3 4 5 6 7 <div id="bloc_pere"> <div id="fils1"></div> <div id="fils2"></div> </div> <div id="fils1"></div> <div id="fils2"></div>
Dans ce cas-ci donc, #fils1 et #fils2 ne prendront le style que tu leur as donné que lorsqu'ils seront DANS #bloc_pere. A l'extérieur de la DIV #bloc_pere, ils seront affichés "par défaut", car tu utilise un sélecteur d'identifiant (une sorte de hiérarchisation, si tu veux).

Et dans ton 2ème exemple, tu peux t'en douter, les styles que tu donnes à tes ID seront appliqués à ceux-ci où qu'ils se situent dans ta page.

Maintenant, tout dépend de la complexité de ta page, mais ce style d'écriture (ton 1er exemple, avec ce que l'on appelle les sélecteurs d'identifiant (si, encore une fois, mes souvenirs sont exacts) peut s'avérer très utile.

;)
27/09/2007, 15h36
beeboo

Salut,
Ce n'est pas en terme de performance qu'il faut réfléchir mais en terme de logique et d'héritage (de cascade).

ici

Code:

#pere #fils{}

n'a pas vraiment d'utilité car équivalent à #fils tout seul
On utilise cela plutôt avec des classes.

Code:

#pere element.classe_dans_fils

Tu vas définir dans #pere tous les attributs qui seront répercutés sur les éléments enfants et dans #fils1 et #fils2 redéfinir les attributs propres à ces éléments.

Maintenant quant à parler en terme de performances d'un fichier CSS en terme de poids, il faut savoir que le navigateur garde le css dans sa cache ainsi il n'est chargé qu'une seule fois d'où l'intérêt de travailler avec une feuille css commune pour tout le site.