CSS par les gens qui en font

CSS par les gens qui en font (le 10 septembre 2012)

Raphaël Goetter a écrit un billet sur son blog que je ne peux que recommander d'aller lire : CSS, la grande remise en question. Cela m'inspire plusieurs réflexions.

Une des grosses faiblesses de CSS, enfin jusqu'à présent, est d'avoir été majoritairement promulgué par des gens dont ce n'est pas la spécialité, au sens de devoir produire de la CSS. Beaucoup. Tous les jours.

En résulte quelques dogmes qui, s'ils ont réellement fait du bien quand il a fallu se débarrasser des tableaux de présentations, posent maintenant des problèmes si on les applique trop strictement.

La sacro-sainte sémantique est l'un des piliers. Seulement, si je peux comprendre qu'une structure HTML soit sémantique (un titre est un titre, etc.), c'est quoi une classe CSS sémantique ?

Donc, il faudrait que les noms de classes soient explicites et aient du sens. Seulement, à qui cela profite ?

  • Aux navigateurs ? Sauf votre respect, si la classe s'appelle .a ou .toto ou .bloc_info_news, le navigateur s'en fout.
  • Aux utilisateurs ? Ils s'en foutent encore plus, tant que le site marche.
  • Aux intégrateurs ? Ah oui, là c'est utile : il faut que les classes sont intelligibles pour les personnes qui vont s'en servir.

Seulement à votre avis, vous pensez qu'un intégrateur qui arrive sur le projet et/ou qui débute va mieux comprendre
.left ou .bloc_info_aside_events ? Donc, déjà pour moi, l'emploi de certaines classes génériques n'est même pas sujet à débat, c'est une nécessité pratique.

Quand vous maintenez une unique CSS qui gère un très gros site, je peux vous assurer que si vous utilisez des styles peu réutilisables, votre CSS va enfler littéralement et va vite devenir difficile à maintenir.

D'autres domaines suggèrent des pratiques qui servent la réutilisabilité. Typiquement, quand on parle performances, un des conseils est d'éviter les sélecteurs à rallonge. C'est extrêmement pratique pour la réutilisabilité et pour les versions mobiles et/ou imprimables, cela évite d'avoir à surcharger des styles à rallonge avec des styles encore plus à rallonge, et surtout d'avoir à redéfinir des styles trop spécifiques. C'est principalement pour cela que j'ai dans mes CSS des sélecteurs très courts.

Encore une fois, tout n'est pas à jeter dans les anciens préceptes, bien au contraire. Mais les contraintes du métier ont réellement évolué, ne faites surtout pas l'erreur de croire que vous n'avez pas besoin d'évoluer avec. Sans parler de grande remise en question, le métier change. Même en faisant mes CSS presque tout seul sur certains projets, d'autres intervenants qui mettent le contenu me font changer ma façon d'aborder le côté pratique des styles que je définis. Alors, imaginez sur des projets bien plus énormes.

Et pour terminer, une question : en matière de CSS, va-t-on enfin écouter ceux dont c'est le métier ?

Lisez donc des articles de Raphaël Goetter ou l'excellent livre CSS maintenables de Kaelig, vous aurez une approche bien moins dogmatique et beaucoup plus professionnelle du métier.

Permalien :

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

4 commentaires

Posté par Yann le 10/09/2012 à 8:07:17
Bonjour,

J'ai lu le billet de Raphaël et pense que les bonnes pratiques d'intégration web / CSS devraient se conformer à ce qui existe dans les domaines connexes. En effet, qu'ils s'agisse des méthodes de développement informatique ou même de structuration de code HTML, les outils et les normes existent (je pense à Opquast pour les bonnes pratiques, à KNACSS pour le canvas, à TopStyle et autres pour les environnements de code).

Mettre en application ces principes en utilisant ces outils permet déjà de partir sur une bonne base non ?
Posté par Nico le 10/09/2012 à 9:17:46
Oui... et non. Je m'explique ! (sourire)

Opquast te dit par exemple ce qu'il faut faire ou pas sur un site, et le fait très bien, je vais pas dire le contraire, étant un des premiers supporters du projet.

Mais Opquast ne répond pas directement à la question : "comment je fais pour produire de la CSS efficacement ?". Il y répond de manière très indirecte ou collatérale via certains aspects (notamment les performances, comme l'exemple donné ci-dessus). Donc oui pour écouter et regarder ce qu'il se fait dans les autres corps de métier (c'est même du bon sens !), non pour la spécificité du "métier CSS".

KNACSS (j'adore ce nom) y répond de manière plus pratique en posant certaines propriétés, de bonnes idées et une organisation. Je ne dis pas que c'est parfait, mais cela a le mérite d'exister et de répondre à une question concrète.
Posté par Yann le 10/09/2012 à 15:35:36
Hé hé, alors on est bien d'accord (sourire) Et on peut penser qu'en fonction de la mission, on adoptera une approche du code qui pourra différer un peu...
Posté par Nico le 10/09/2012 à 15:55:43
Tout à fait ! (clin d’oeil)

Si je fais un petit site vitrine de 4 pages, je sais que les styles seront sauf cas très improbable peu repris, le site risque très peu d'évoluer, donc je peux me permettre d'être peut-être un poil plus perfectionniste (dogmatique) afin de chercher au plus léger. Ceci dit, ça n'empêche pas d'être réutilisable.

Si la taille de la CSS est déjà plus conséquente, là, je passe en mode "styles réutilisables à fond les manettes" (idéalement, guides de styles et tout le tralala).

En général, j'ai remarqué que passé une certaine taille/complexité, ma façon d'aborder la CSS change. J'ai constaté cela aussi sur le poids (non-compressé) de mes CSS : certains sites, même après refonte/ajouts, ne font pas dépasser les 20 ko à ma CSS. Et sur certains sites, c'est même moins de 10 ko, avec versions print/smartphone comprises : là, le "dogme" évoqué par Sieur Goetter fonctionne très bien.

Par contre, sur des sites plus conséquents, la CSS avoisine ou dépasse les 50ko non compressés, là pour gagner du poids, il faut penser beaucoup plus réutilisable et beaucoup moins dogmatique. Là à mon avis se justifient plus les préprocesseurs CSS et des méthodes comme OOCSS. Après, dans toutes mes réalisations, je suis très loin des 500 ko de CSS de Facebook. (sourire)

Ceci dit, je pense qu'en bichonnant un peu nos CSS avec quelques bons principes (sélecteurs courts, bonne utilisation de la cascade, de l'héritage etc.), on arrive toujours à garder un poids très raisonnable.

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.