Devis Gratuit - Entretien préalable sans engagement

Contacter les Tontons Codeurs, le gang complice de vos projets de communication :

09 83 24 44 45
06 51 01 56 70
nous écrire

Les Gabarits sont faciles à changer. Le contenu, en général ne l'est pas.

10 mars 2016

Ce qui suit est une traduction d'un article de Chris Coyier sur CSS-Tricks, vous pouvez retrouver l'original ici.
Il va de soi que ces conseils, qui s'adressent essentiellement à l'utilisateur qui manipule les feuilles de style, se déclinent également vis-à-vis des rédacteurs qui abusent des boutons permettant l'enrichissement du texte. Mais laissons le expliquer :
 

Il existe du HTML de deux sortes :

  1. Le HTML qui constitue les gabarits
  2. Le HTML qui est du contenu

J'ai l'impression que les discussions à propos du HTML sont embrouillées si on ne fait pas cette distinction.

Par exemple, j'aime bien l'approche de Harry Roberts à propose des éléments header. Harry parlait d'applications, donc c'était peut-être implicite, mais il n'en est pas moins clair que ces classes s'appliquent au HTML du gabarit, pas du contenu.

(Ci-dessous un exemple au hasard, il se répercute dans un grand nombre de cas.)
demonstratio_contenu_gabarit
Ici c'est Drupal qui est utilisé comme exemple avec une page du présent site, mais n'importe quel système de contenu et de gabarits est concerné.

Si c'est un bout de HTML qui va dans une base de données, c'est du contenu

Il n'est pas impossible de changer du contenu, mais c'est relativement plus compliqué et plus dangereux.

Les sites web peuvent exister très longtemps. Le contenu a tendance à s'étoffer encore et encore. Par exemple CSS-Tricks comprend 2260 articles et 1369 pages. Au fil des années, je les ai truffés de classes ci ou là pour obtenir tel ou tel style et à la longue, je le regrette systématiquement.

Pourquoi regretter d'avoir placé des classes dans le contenu ?

Peut-être trouvez-vous que le nom de la classe est inadapté et vous allez commencer à le détester.
Peut-être vous finirez par changer la classe pour quelque chose de mieux.
Peut-être vous n'allez plus utiliser la classe.
Peut-être vous allez oublier jusqu'à l'existence de la classe, et ne pas l'envisager au moment d'un refonte.
Peut-être vous allez faire resservir ce vieux nom, mais pour quelque chose de nouveau et votre contenu des premiers temps en sera affecté.

Ce ne sont que quelques possibilités.

Mais le problème commence à se poser quand vous vous attaquez à «corriger» le contenu ancien. Qu'allez-vous faire ? Retrouver tout le contenu antérieur qui utilise ces classes et faire le ménage ? Lancer une requête dans la base de données pour supprimer la classe ? Un travail soit fastidieux soit risqué.

Le contenu dans du Markdown : une aide

Il est assez confortable d'écrire grâce au Markdown, une fois qu'on en a pris l'habitude. Mais le plus beau, c'est que ça n'ajoute pas, et ne vous permet même pas d'ajouter, des classes dans quoi que ce soit du HTML qui est généré. À moins que vous n'écriviez du HTML directement entre des repères Markdown, ce qui semble toujours un peu brouillon (de fait, ça l'est).

Styler le contenu

Comment attribuer un style au contenu alors, sans classes ? Heureusement le contenu est stylé de façon assez exhaustive. Vous pouvez restreindre vos styles à un conteneur spécifique en le ciblant.

  1. .content h2 { }
  2. .content figure { }
  3. .content table { }

Admettons que vous ayez absolument besoin de certaines variations dans le contenu

Si toutefois vous deviez contrevenir à la règle qui veut qu'on ne met pas de classes dans le contenu, vous pouvez sans doute le faire intelligemment.

  • Si vous utilisez un CMS, peut-être a -t-il une classe par défaut que vous pouvez détourner. Par exemple, WordPress propose des classes sur les images si vous le sélectionnez.
    1. align-right
  • Vous pouvez rentrer votre contenu de telle sorte qu'il ne soit pas perdu dans un tombereau de contenu déversé d'une traite ? Comme un champ personnalisé ?
  • Vous pouvez appeler votre contenu au moyen d'un raccourci (dans WordPress)
    1. [table data="foo" style="bar"]
  • Si vraiment, vous devez utiliser une classe, cherchez alors à la nommer de sorte à ce qu'elle vous soit utile sur la durée.

Les gabarits sont faciles à changer

C'est même ce pour quoi ils sont faits ! Vous avez probablement une poignée de gabarits en comparaison de tout ce que vous faites générer comme pages. Modifiez-les et tout le contenu qui repose dessus sera mis à jour. Le HTML qui encadre le contenu aura n'importe laquelle des classes qui vous fait besoin.

Donc…

  • Le HTML pour les gabarits = classes, foncez !
  • Le HTML du contenu = gardez le brut !