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.
