Un article très intéressant sur l'utilisation des variables en css. Je note ici quelques aspects qui ont attiré mon attention.

Définir des valeurs par défaut

var() permet de spécifier des valeurs si la variable css n'en a pas, par exemple:

.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

Ainsi, on peut adapter finement le contenu des variables en fonction de sélecteurs un peu custom tout en gardant un aspect par défaut:

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

Ce qui permet par exemple d'avoir un style à fort contraste pour un profil particulier sans redéfinir toutes les balises, simplement en affectant de nouvelles valeurs aux variables.

Définir des valeurs spécifiques à une classe

On peut également, dans le même esprit, définir les valeurs au sein d'une classe toujours dans l'idée d'éviter une réécriture et de rendre la feuille de style plus lisible et claire.

les variables inline

Un autre truc auquel je n'aurais pas pensé, c'est de redéfinir les variables css inline ! (attention, idée de génie, je trouve):

1- on définit la classe grid avec une variable par défaut.

.grid {
  --columns: auto-fit;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

2. on change la valeur de cette variable de façon ponctuelle et contextuelle via l'attribut style de la balise:

<div class="grid" style="--columns: 3;">
  ...
</div>

c'est juste beau

OMAGAD: un mario kart en css...

Mais... Que... Comment ? Heu... Pourquoi en fait... ?!

Histoire de proposer autre-chose que le pachydermique Tailwind, j'ai regardé les frameworks css légers... Petite sélection (les poids sont présentés non gzippés)

---

MUICSS

Je l'utilise régulièrement, il est simple et ne demande pas un grand temps d'adaptation pour l'utiliser. Le CSS seul pèse 44ko. Si on veut les trucs un peu plus fancy (overlays, modal, selects custom) il faut ajouter un js de 20 ko.

C'est pas indécent et l'aspect, pour être assez épuré et minimaliste, n'en reste pas moins très satisfaisant.

download v0.9.43 - Site web

---

InvisCSS

Je ne l'ai pas testé mais il me semble qu'il constitue une alternative intéressante à MUICSS: il reste léger avec ses 50ko minifiés et ses 7ko de JS, est graphiquement très proche du rendu de Muicss ou bootstrap et propose plusieurs thèmes de base.

De plus, il dispose d'une panoplie de styles «admin» et je trouve ce concept intéressant.

Comme Muicss, l'ensemble est assez minimaliste ce qui a l'avantage d'être facilement adaptable.

Un détail particulier a attiré mon attention: la philosophie d'InvisCSS est d'éviter la multiplication de classes pour appliquer les styles:

<button class="btn btn-primary">Primary Button</button> // bootstrap
<button class="pure-button pure-button-primary">Primary Button</button> // pureCSS
<button class="primary">Primary Button</button> // InvisCSS

downloads v1.6.6 - Site web

---

Vanilla CSS

Deux choses ont attiré mon attention: le nom et le fait que c'est réalisé par la Ubuntu Web Team. Le truc semble assez complet et bien foutu même si le style reste assez austère à première vue. La page de démo permet de se faire une idée précise des possibilités qui semblent assez étendues.

Toutefois, impossible d'avoir une évaluation du poids réel du machin car il utilise sass, ce qui me semble un comble pour un framework qui se fait appeler vanilla...

Download v2.4.0 - Site web

---

Knacss

Même s'il s'agit plus d'une «feuille de style RESET survitaminée» il m'a semblé intéressant de le placer ici.

KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d’éléments, les grilles de mise en page, dans l’esprit d’être adapté à toutes les tailles d’écran (responsive). Le tout automatiquement, en l'appliquant simplement sur votre structure HTML.

Le style est assez basique mais très fonctionnel et sa simplicité permet là encore de le customiser facilement, le tout pour 37ko. Si vous avez besoins des onglets, il faudra ajouter 4.5ko de js.

Download - Site web

---

Milligram

Avec un poids de 8.72 ko, c'est une feuille de styles vraiment légère. L'ensemble paraît minimaliste mais cohérent et propre comme le montre la page du projet

Download v1.3.0 - Site web

---

Beauter

Avec son style coloré, beauter sort un peu de l'austérité des précédents frameworks. Côté poids, le css pèse 25.5ko et le js se contente d'un modeste 1.8ko. Il mérite donc d'être testé

A tester donc. Download - Site web

---

Lit

Un vrai poids plume pour la base (838 octets !) auxquels on peut ajouter 2.2 ko pour les «utils» afin que lit devienne plus qu'une feuille reset. 3ko, c'est pas mal.

Le style est très coloré avec des contrastes de couleur peut-être un peu violents; les éléments de base sont présents, sans effets fancy, ce qui est normal pour un poids aussi réduit. Je vois bien ce framework pour une appli destinée aux plus jeunes.

Download - Site web

---

Conclusion

Il y en a encore beaucoup mais ils se limitent souvent à une standardisation/reset de styles ou alors ils sont très moches...

Pour la plupart, ils n'atteignent pas les fonctionnalités des poids-lourds du genre, et c'est normal: ce n'est pas ce qu'on attend d'eux... Si vous utilisez 10% d'un bootstrap autant utiliser autre chose. Ces frameworks me semble suffisants pour la plupart des productions persos.

Tiens, ça peut être intéressant: j'aime bien les frameworks css mais le poids est souvent un souci. En général, j'utilise muicss dont la base fait 7ko minifiée... toutefois, les effets sont moins beaux.

[EDIT]

Ouate ze phoque ? 477 ko pour du CSS... fous le camp me ranger ta chambre toi ! A côté, Bootstrap fait figure d'anorexique déshydraté !

Alors, oui, on peut utiliser purgeCss dessus pour virer ce qu'on n'utilise pas, mais ça, on peut le faire sur tous les frameworks et en plus, ça complique singulièrement le boulot.

82 effets de texte (la plupart en pur css )

Ya des trucs de fou...