J’essaie des trucs

J’essaie des trucs (le 8 avril 2014)

Il y a quelque chose qui me dérange quand une nouvelle approche de CSS arrive, c’est que souvent la démonstration commence par poser le postulat que l’approche est géniale, ensuite elle démontre pourquoi elle est géniale, et enfin elle conclut qu’elle… est géniale – entre nous soit dit, beaucoup de « démonstrations » fonctionnent ainsi (et c’est accentué par les posts hautement argumentés que l’on peut faire sur Twitter… en 140 caractères donc).

Évidemment, sur mon esprit cartésien, ce genre de « démonstration » n’a que très peu d’effet.

Même si l’approche peut effectivement avoir de grands avantages, je préfère quand la démonstration part des problèmes donnés, se construit, montre ses conditions limites (important ce point, malheureusement trop souvent oublié), conclut sur ses avantages et enfin laisse aux lecteurs le plaisir d’en déduire si elle est géniale.

Souvent, quand je tombe sur ces nouveautés, je m’amuse à les tester, mais pas de manière brutale, de manière beaucoup plus progressive. Ainsi, je peux refaire le chemin de la réflexion, la pondérer, l’apprécier, l’infirmer ou la confirmer.

Un exemple : il y a quelques années, cela faisait un moment que bon nombre de tweets et billets martelaient qu’il ne fallait jamais utiliser d’id pour cibler un élément en CSS. Je passe sur les arguments qui disaient « c’est mal » sans aller plus loin et sur les arguments absolument débiles genre « c’est pas beau », les seuls arguments me semblant corrects étaient les suivants :

  • il n’est pas réutilisable ;
  • le poids est trop élevé par rapport aux classes.

Le premier argument n’était pas nouveau, c’est la définition même de l’id : il est unique. Le second méritait de s’y pencher.

Avec mon esprit de contradiction, je me suis dit : pourquoi poser comme postulat que le poids fort de l’id en CSS soit un inconvénient, alors qu’on pourrait tout simplement en tirer avantage ? Ma première idée était d’utiliser les classes pour styler, et le poids de l’id par exemple pour surcharger à coup sûr les propriétés dans une media-query pour mobile. Et figurez-vous… que ça marchait super bien ! Cela permettait de surcharger efficacement à peu près n’importe quoi avec un sélecteur court.

Sauf qu’en fait, cela marchait bien si on n’avait à effectuer que très peu de surcharges, une ou deux maximum, et surtout si l’on avait besoin de surcharger des sélecteurs avec un nombre de classes à rallonge (ce qui n’est pas bien, les performances déconseillent des sélecteurs trop longs). Sur des sites simples, ça fonctionnait bien (je me souviens l’avoir fait sur un ou deux sites), mais dès que cela se compliquait un peu, je me retrouvait à me trimballer soit des id à surcharger, soit à le faire sur les classes. Plus gênant, les id m’empêchaient même d’utiliser certaines classes utilitaires de RÖCSSTI.

Or, l’ordre dans RÖCSSTI a toute son importance : d’abord les propriétés générales, ensuite le layout global, ensuite le spécifique. Et idem dans les media-queries (ce qui facilite grandement la surcharge). Or là, l’utilisation un peu hasardeuse des id dans la CSS vient au mieux permettre ce qu’une classe bien utilisée permettait déjà, au pire gêner un des principes les plus importants de CSS : du plus général au plus spécifique.

Bref, en quelques essais, je m’aperçus que dans certains cas mon idée fonctionnait, qu’elle n’était pas fondamentalement mauvaise (elle n’a pas empêché certains sites de fonctionner), mais qu’elle dérangeait dans beaucoup d’autres. Par contre, je constatais en même temps que fonctionner avec des classes ne gênait pas : en fait tout le monde a le même poids, et c’est l’ordre de déclaration qui dicte le résultat final. Au final, un principe de base de CSS se retrouve mis en avant, et ça c’est plutôt un bon indicateur.

Bref, tout cela pour vous rappeler un principe : ayez vraiment l’esprit critique face à des articles de plus en plus percutants et des effets de mode : testez, évaluez, appropriez-vous, pondérez, etc. Non pas qu’il faille partir de l’idée que tout changement est à éviter, mais qu’il faut surtout en tirer la substantifique moelle comme disait Rabelais.

Je me permets de re-citer (oui, je le fais souvent) Mehdi Kabab dans un commentaire sur 24 jours de Web :

Intégrateurs, votre cœur de métier ne se limite pas à pisser du CSS au kilomètre. Vos compétences et le savoir que vous avez acquis à la sueur de vos erreurs (vive l’apprentissage par l’échec, la meilleure école de l’intégrateur/développeur Web) ont de la valeur. Alors, s’il vous plaît, ne les rejetez pas sous prétexte qu’un personnage influent clame tout haut une opinion personnelle, mais qui se répand comme une traînée de poudre de part son statut de « gourou ».

Et avant que cela ne trolle violemment dans les commentaires : avoir l’esprit critique n’empêche pas de tester comme un dingue et d’évoluer à vitesse grand V : je ne fais pas un site sans qu’il y ait un truc de nouveau, mieux, amélioré. Non pas que le site sera forcément mieux que le précédent, mais comme principe de base, il faut que j'améliore au moins un point dans chaque réalisation par rapport à la précédente !

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1622

3 commentaires

Posté par Gaël Poupard le 08/04/2014 à 13:08:34
C'est tellement indispensable de conserver l'esprit critique. Une autre image qui s'y rapporte : les moutons de Panurge (grand sourire).

Sinon pour ton exemple des identifiants utilisés dans les MQ, ça m'a sauvé une fois : je n'avais pas la main sur l'ordre de compilation des CSS, et les MQ se retrouvaient dans le premier quart du fichier. Après un brin de réflexion je me suis astreint à n'utiliser que des classes dans les CSS génériques, et des identifiants dans les MQ. Ainsi la surcharge se faisait naturellement (clin d’oeil)

Les identifiants n'ont jamais été mauvais. Leur utilisation, oui.
Posté par Nico le 08/04/2014 à 13:13:39
Gael : oui, je suis membre du SPID : Société de Protection des ID : http://www.24joursdeweb.fr/2012/les-id-sont-nos-amis/
Posté par Gaël Poupard le 31/10/2014 à 8:28:00
Tu me refais penser, en lisant ceci, à un point bien particulier : un identifiant ne devrait pas porter de styles transportables par une classe atomique (margin: 0, spécial dédicace).

On n'applique à un ID que des styles spécifiques. Mon dieu, mais il n'y aurait donc plus de problème ?

Mal de crâne, réflexion, ouille ouille ouille !

Allez, je retourne bosser, tous ces échanges avec des arguments contre les ID me font tellement rire. Merci Nicolas pour ce petit rappel sur Alsa, et cette douce relecture du matin !

Sauvons les ID !!

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.