Aux armes ! Défendons la sémantique en CSS !

Raphaël Goetter a publié dimanche une charge contre l’usage systématique de la sémantique en CSS. L’argument qui m’intéresse est qu’une classe CSS sémantique ne serait pas réutilisable. On imagine mal en effet comment une classe .sticky-video pourrait servir à positionner un bloc autre que celui des vidéos mises en avant. Mais de quelle réutilisabilité parle-t-on ?

Je prendrai dans cet article deux domaines de l’habillage des pages Web : le titrage et le positionnement.

Le titrage d’abord. L’article de Nicole Sullivan sur les éléments de titre est convainquant. L’auteur suggère d’utiliser des classes réutilisables .h1, .h2, .h3 etc. afin d’habiller les titres. Si un design prévoit cinq types d’habillage des titres, on comprend bien que cela ait du sens de marquer en HTML les éléments de titres par des classes CSS réutilisables, plutôt que d’utiliser en CSS des sélecteurs complexes et nombreux. Et puis ces classes aideront à décliner les titres de manière homogène selon les médias par media queries.

Venons-en au positionnement en CSS.

En positionnement CSS, le raisonnement de Nicole S. ne donnerait pas des classes du type .left ou .span3 comme fournies par les frameworks CSS Knacss et Bootstrap. L’équivalent de telles classes en titrage ressemblerait plutôt à .titre-encadré-bleu à la place de .h2. Pour positionner à la manière des titrages de Nicole S., il faudrait plutôt utiliser des classes génériques telles que .pos-type-1, .pos-type-2 etc. Ainsi si le designer définissait des types de positionnement et s’y tenait, cela aiderait certainement à les décliner de manière homogène selon les médias. Cela dit par expérience le design ne se prête pas facilement à une homogénéisation du positionnement des blocs.

Pour résumer, il me semble que la pratique des classes CSS réutilisables se justifie dès que l’on peut définir des types homogènes (de titrage, de positionnement etc.). L’apparence est alors déclinable selon les médias. Mais en aucun cas le nommage de ces classes CSS ne devrait dépendre de l’une de ces déclinaisons !

Et donc en dehors des types homogènes, un nommage sémantique reste à mon avis une bonne pratique. Car enfin à quoi sert la sémantique ? La sémantique en CSS ne sert-elle pas précisément à rendre le code CSS plus facile à maintenir et à décliner sur différents médias ?

En vérité ce sont les classes « techniques » de Knacss et Bootstrap qui ne sont pas réutilisables. Si par exemple le nom d’une classe implique une mise en page sur trois colonnes pour des écrans de quinze pouces, comment passer à sept colonnes sur les écrans plus larges ?

Certes, le langage CSS est de bas niveau et force effectivement à la répétition et au copier-coller. Les préprocesseurs CSS (dont LESS) répondent élégamment au problème de la réutilisation sans pour autant s’assoir sur la sémantique.

Un bémol toutefois, quoique très spécifique. Il me semble que des classes « techniques » en CSS se justifieraient dans le cas d’une affectation en dynamique sur des éléments HTML, en JavaScript. On peut en effet gérer l’apparence dynamiquement par JavaScript, selon la largeur du navigateur, comme le fait Facebook.

2 Responses to Aux armes ! Défendons la sémantique en CSS !

  1. Kaelig says:

    Il est des questions qui se posent dans un cadre de productivité et de collaboration sur de moyens à gros projets.

    Je serais curieux de savoir sur quel type de projet tu travailles pour en arriver à ces conclusions. Si j’en crois ton portfolio, alors ce sont des projets solo à taille raisonnable dans lesquels tu peux te permettre de t’appliquer et faire un joli code très “sémantique”.

    Sur des systèmes complexes, la sémantique liée au contenu des classes rend le code un cauchemar à maintenir, et quelques classes utilitaires sont les bienvenues (tout est question de mesure, attention à ne pas en abuser).

    Plusieurs remarques sur ton billet :

    – les experts qui arrivent à ces conclusions ne sont pas des idiots (et ont une expérience que la plupart développeurs n’ont pas),
    – tu n’as visiblement pas bien lu ni appliqué le raisonnement OOCSS (jette un œil à son système de grilles fluides). En OOCSS, on parle de “sémantique visuelle”, et on s’écarte de la “sémantique relative au contenu”,
    – un bon code html/css est itératif, solide et extensible. De plus en plus de professionnels s’accordent pour dire qu’une sémantique des classes trop liée au contenu vient mettre en péril ces fondamentaux (Jonathan Snook, Nicole Sullivan, Raphaël Goetter, Nicolas Hoffmann…).

    Il est bon de remettre en question les frameworks CSS, mais tout est question de contexte ; tu sembles établir une généralité à travers des critiques peu constructives et une interprétation biaisée de la philosophie de ces frameworks.

  2. Cpag says:

    Bonjour Kaelig et merci pour les réactions ici et sur l’article des grilles fluides. Oui mes projets sont tous d’une taille modeste. Nous sommes au plus trois : (parfois) un journaliste, (rarement) un designer, et moi-même pour l’intégration.

    J’admets mes lacunes en OOCSS. En rédigeant un commentaire sur l’article de Raphaël G., je me suis aperçu que mon texte était trop long et puis l’absence de mise en forme de Disqus me gênait, j’ai donc posté une partie ici sous la forme d’un article. De toute manière le débat n’intéresse pas que moi donc il peut être public. Et le Web ne déborde pas de ressources sur les CSS orientées objets.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « w1cNt2 » dans le champ ci-dessous :