Classless CSS framework

Publié le 20/01/2021

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.