↓Aller au contenu

Classless CSS framework

·496 mots·3 mins
Sommaire

Ce n’est une surprise pour personne, je hais, je vomis, j’abhorre les frameworks CSS. Je trouve génial ce que certaines personnes arrivent à faire avec quelques lignes de code, des <div> tout partout, mais cela noie la syntaxe du fichier, alourdit la compréhension que je peux en avoir et finit par me faire détester quelque chose d’essentiel. Le dernier exemple en date est Bulma, qui a l’air extrêment prometteur, orienté Flexbox, bourré de plein de bonnes idées, avec des classes à ne plus savoir qu’en faire, tout en conservant les fonctionnalités “modernes” (navigation, cartes, section “hero”, …).

Sauf que le morceau ci-dessous

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    </head>
    <body>
        <h1>Titre principal</h1>
        <h2>Titre secondaire (1)</h2>
        <p>Paragraphe</p>
        <h2>Titre secondaire (2)</h2>
        <p>Paragraphe (aussi)</p>
    </body>
</html>

donne le rendu HTML suivant (sous Firefox 84), avec une première passe de mise en page (sans fioritures, couleurs, accessibilité ou quoi que ce soit, mais lisible):

Bulma, de son côté, donne ceci:

C’est délibéré, c’est dans la doc:

Because Bulma solely comprises CSS classes, the HTML code you write has no impact on the styling of your page. That’s why .input exists as a class, so you can choose which <input type="text"> elements you want to style.

Il suffit de lire pour savoir à quoi s’attendre, mais devoir ajouter des classes sur des éléments qui spécifient déjà une certaine forme de formatage me semble un tantinet redondant.

A l’opposé, il y a les mastodontes que sont Bootstrap, Foundation (- vous voulez un squelette de base ? vous partez déjà avec 300ko de fichiers CSS/JS) ou Semantic UI.

Bref
#

Je veux du KISS, de la simplicité, un template léger et économe, des couleurs choisies pour moi (parce qu’avec la manière dont j’habille mes enfants le matin, les gens pensent que c’est Mardi Gras toute l’année) et une cohérence esthéthique qui me permette de me concentrer sur les éléments que je souhaite afficher, et pas sur la manière dont ces éléments doivent s’agencer entre eux, sous réserve que la tangente asymptotique de mon grille-pain soit compatible avec mon navigateur.

Classless
#

C’est plus ou moins le moment où je tombe sur des frameworks classless, c’est-à-dire sans classes: le balisage HTML est utilisé tel quel, sans se poser de questions. Certains éléments permettent une mise en page, mais le tout reste logique, ou en tout cas, induit:

  • La typographie de base est respectée (h1, h2, …)
  • Un élément de navigation sera décrit par une balise <nav> (Joie! C’est même mnémotechnique) avec des éléments de liste en dessous.
  • Idem pour les éléments articles, aside ou footer dont on vantait la présence au tout début du standard HTML5 (- oui, je parle de 2012, pas de 2021).
  • …

J’ai repéré ceux-ci, suite à quelques dépôts sur Github. Et il y en a presque plus que des frameworks “connus”: WaterCSS, Classless, ConcreteCSS, W3C Core styles, Sakura, Stylize.css, RidgeCSS, AttriCSS, FlatRemixCSS ou encore BonsaiCSS.

Le choix ne manque pas. Long live the kiss.