Journal
Archives du 19 novembre 2007
La sémantique des classes
19 novembre 2007 5 commentaires — accessibilité, css, framework, html, sémantique
En HTML le nombre de classes et le nom des classes est libre. Néanmoins il est bon d’utiliser des classes sémantiques, décrivant la fonction de la balise plutôt que son style.
Exemples
| Sémal | Sémantique |
|---|---|
<strong class="red"> |
<strong class="important"> |
<div class="sidebar"> |
<div class="aside"> |
<ul class="large-column"> |
<ul class="menu"> |
Pourquoi faire ?
De cette façon en utilisant des feuilles de style CSS l’on peut décider de changer les couleurs et l’affichage des pages sans avoir à changer l’HTML ou d’avoir des styles illogiques tels que .red { color:pink; }. D’autre part votre site peut avoir plusieurs feuilles de style (impression, mobile, slide, …), où vous pouvez décider par exemple que la classe large-column serait dans ce format… ni large, ni en colonne.
Ce n’est pas très grave si quelques-unes de vos classes décrivent l’apparence finale plutôt que la fonction de votre texte. Néanmoins c’est important dans une démarche qualité globale et cela augmente la réutilisabilité de votre code.
Tout ça pour en venir aux frameworks actuels
Les frameworks CSS qui foisonnent ces derniers temps tels que Blueprint CSS et YUI Grids CSS imposent sciemment l’utilisation de classes telles que <div class="column span-15">. C’est dommage. C’est pourquoi je les évite.
J’attends que les implémentations de CSS dynamiques telles que CleverCSS intègrent les fonctionnalités appréciables de ces frameworks. Mais je n’ai encore vu personne avancer cette idée. Ils pourraient pourtant par exemple avoir des propriétés magiques de type colspan: 15 qui se transformeraient en code nécessaire à la création d’une colonne à la bonne taille… Lazyweb te sens-tu le courage ?
