Commentaires sur : .ma-classe-css vs div.ma-classe-css

Par : Adrien Leygues

Adrien Leygues — Tue, 06 May 2008 10:47:16 +0000

Salut,

Eric a fait un article sur le sujet, http://performance.survol.fr/2.....teurs-css/

Par : Destination Web

Destination Web — Tue, 22 Apr 2008 00:27:07 +0000

la VF, c’est pratique pour avoir les date en français sur le blog, mais pour l’admin, certaines lignes sont un peu longue et bouffe un peu les fonctions, dans les widgets notamment…

Par : Bruno Bichet

Bruno Bichet — Mon, 21 Apr 2008 22:23:52 +0000

@David > héhé, à défaut de trouver une vraie réponse, ça fait peut-être une vraie question à résoudre de manière collective
Sur les reset CSS : plutôt que de faire du reset plus ou moins sélectif tout au long de la feuille de style, j’ai opté pour un reset explicite pour me faciliter l’intégration.

En même temps, je pense avoir suffisamment expliqué les avantages et les inconvénients des reset pour me sentir à l’aise sur le sujet. Donc OUI, le reset CSS n’est pas forcément la panacée, mais NON ce n’est pas forcément n’importe quoi non plus ^^

Par : David (Azur Dev)

David (Azur Dev) — Mon, 21 Apr 2008 22:16:15 +0000

Je pensais trouver un vraie réponse avec plein de tests dans ton article, je suis un peu déçu là!

Ces trucs de reset, c’est vraiment du travail d’amateur.

Si les marges d’un élément posent problème, il suffit les spécifier. Inutile de mettre tout le monde à zéro pour re-spécifier ensuite. Ça c’est du gaspillage de temps et de perf à grande échelle.

Par : Bruno Bichet

Bruno Bichet — Mon, 21 Apr 2008 15:43:34 +0000

@Florent V. > Concernant le contexte, j’ai tendance à faire une peu la même chose, mais en re(lisant) les conseils de Mozilla, il semble que div#main {} soit moins “performant” que #main {}.
Là, encore, ça me parait assez logique. Par contre, ce que je trouve moins intuitif, c’est que .maclasse soit plus performant que div.maclasse.
Concernant le contexte, en fait il manque un “with” au css comme en javascript
@Frank Taillandier > J’étais justement tombé sur une lecture qui allant dans le sens de spécifier la balise devant la classe, mais impossible de remettre la souris dessus
Après réflexion, si on part du principe que le navigateur fait un Array des balises d’une part et un Array des classes d’autre part, il est tout à fait possible que “div.maclasse” oblige les navigateurs à parcourir deux Array et à y effectuer des opérations complexes pour trouver l’intersection…

@Olivier > Je suis tout à fait d’accord avec tes conclusions. Quand à la phobie sur les performances, j’en suis loin En fait, je préfèrerais toujours une dénomination longue et compréhensible à une courte qui ne veut plus rien dire 15 jours après
Disons, que depuis quelques temps, je prends conscience que je suis un grand gaspilleurs de ressources : je n’optimise pas suffisamment mes images, j’ai tendance à multiplier le nombre de CSS importées, alors de temps à autres, je bats ma coulpe pour me remettre les idées en place
Sinon, dans le genre phobie, j’ai lu plein de fois que certain omettait les point-virgule après la dernière déclarations pour économiser un signe… Là, je crois que c’est grave

Par : Olivier

Olivier — Mon, 21 Apr 2008 14:24:33 +0000

Salut à tous,
voila une discussion bien intéressante, comme beaucoup d’autres sur ton blog Bruno. Je me permets d’apporter mes 2 cents comme disent les anglais
Je ne suis pas persuadé de l’augmentation des performances de la page en qualifiant plus ou moins les tags. Je rejoins l’avis de Frank quand il dit qu’il ne qualifie son tag que s’il y a une nécessité (entre paresseux on se comprends :-))

Si tu nous fais tout d’un coup une phobie sur la rapidité d’interprétation de ton code, réfléchis un peu à la longueur du nom de ta classe! Dans l’absolu, toutes ces infos doivent aussi arriver au navigateur qui doit les interpréter;

div#latest-news p.normal ul li.trimmed est bien plus long à passer que div#l p.n ul li.t ça en fait des caractères économisés !

Non franchement, une bonne structure hiérarchique, l’emploi parcimonieux de qualification des tags me semble être LA voie à suivre si tu veux accélérer l’interprétation du code.

Merci pour vos interventions.
Olivier

Par : Frank Taillandier

Frank Taillandier — Sat, 19 Apr 2008 23:02:26 +0000

J’essaye d’être le plus concis possible quand je dois créer une classe. Déjà parce que je déteste écrire des choses inutiles, ensuite parce que ça me fait un fichier CSS plus light au final - c’est aussi un gage de rapidité - et enfin parce que ça me permet d’éviter la surenchère à la spécificité. Donc, s’il n’y a pas besoin d’ajouter le tag, je ne le met pas. Je n’ai jamais rien lu qui indique que rajouter le nom de la balise devant la classe ou l’identifiant aide à une interprétation plus rapide de la part des navigateurs, je pense que ça se saurait depuis le temps que CSS existe. Par contre je fais toujours attention à la spécificité des différentes classes pour éviter les conflits. (http://www.yoyodesign.org/doc/w3c/css2/cascade.html#specificity).

Par : Florent V.

Florent V. — Sat, 19 Apr 2008 16:52:14 +0000

Hello,

Pour ma part j’ai tendance à utiliser des classes «génériques» nommées «title», «subtitle», «twocol», «normal», etc. Mais je ne les cible jamais directement, je passe toujours par le contexte:

div#latest-news h2 {}
div#latest-news p.subtitle {}
div#latest-news p.normal

div#main div.twocol .title {}
div#main div.twocol .normal {}

Des choses du genre.

Le seul inconvénient c’est si on désire ensuite utiliser le style de “div#main div.twocol .title” pour un élément ayant la classe “title” dans un autre conteneur. On aurait alors intérêt à avoir une classe spécifique à ce style et jamais utilisée dans le reste du site (ce qui disqualifie les noms génériques comme «title», «normal», etc.), et à utiliser cette classe aux endroits voulus. Sauf qu’on obtient le problème inverse: ça risque de ne pas être assez précis et pas facilement adaptable.

Dans tous les cas l’évolution du contenu (notamment l’arrivée des contenus non prévus au départ dans les maquettes graphiques ou les éventuelles maquettes ergonomiques) n’est jamais bien facile à gérer, je trouve. Si on veut factoriser les styles, on se retrouve à devoir réécrire des parties de feuille de style déjà faites, voire à modifier des templates.

Par : Bruno Bichet

Bruno Bichet — Fri, 18 Apr 2008 23:56:54 +0000

Merci, je testerais Ozh’… Par contre, le plugin wp ajax edit comment ne semble pas fonctionner chez moi

Par : Comme une image

Comme une image — Fri, 18 Apr 2008 22:36:16 +0000

C’est vrai que pour les widgets, ça déconne un peu la mise en page (et je ne me suis même pas posé la question, je pensais que c’était itou en V.A. parce que j’utilise la V.F. depuis le début – accessoirement j’ai joué les relecteurs sur la traduction de la 2.5 donc s’il reste des coquilles, on peut me taper).
Mais en toute franchise, je ne modifie pas mes widgets très souvent, la gêne est donc modérée (et pour l’admin, je ne saurais trop te recommander si tu ne l’utilises pas encore Ozh’ Admin Drop Down Menu qui simplifie drôlement l’admin).