Présentation

Sumi.css est un framework CSS de 6,7 KB minifié et gzippé, distribué en un seul fichier sumi.min.css. Aucun processus de compilation n’est requis, aucune dépendance JavaScript n’est introduite, ce qui simplifie l’intégration dans tout projet web. Le principe « classless‑first » signifie que les éléments HTML standards (titres, formulaires, tables, cartes, accordéons, modaux, navigation) sont déjà stylés dès leur balisage, sans ajouter de classes supplémentaires.

<link rel="stylesheet" href="sumi.min.css">

Architecture et personnalisation

Chaque couleur, police, taille et rayon de bordure est exposé via une propriété CSS personnalisée (custom property). Cette approche rend le thème modifiable en surchargeant simplement les variables, par exemple --color-primary ou --radius-sm. Le framework applique une spécificité nulle aux sélecteurs d’éléments, garantissant que tout style ajouté par l’utilisateur l’emporte sans recourir à !important. Le mode clair/sombre s’ajuste automatiquement au réglage système grâce à la media query prefers-color-scheme, et l’attribut data-theme permet de forcer explicitement l’un ou l’autre.

Accessibilité et conformité

Sumi.css intègre des focus rings visibles pour chaque élément interactif, facilitant la navigation au clavier. Il exploite les attributs ARIA (aria-invalid, aria-busy, aria-current) pour refléter l’état des composants, ce qui améliore la compatibilité avec les lecteurs d’écran. De plus, le framework respecte la préférence de l’utilisateur pour les animations réduites via la media query prefers-reduced-motion, désactivant les transitions non essentielles.

Performances, intégration et limites

Le poids de 6,7 KB (gzippé) assure un impact négligeable sur le temps de chargement, surtout lorsqu’il est servi depuis un CDN tel que jsDelivr. L’absence de compilation évite les étapes de build, mais la philosophie classless peut contraindre les développeurs qui souhaitent un contrôle granulaire sans ajouter de classes. La dépendance aux propriétés personnalisées nécessite un support complet des navigateurs modernes ; les versions antérieures d’Internet Explorer ne les interprètent pas, ce qui impose un fallback ou une exclusion. Enfin, la spécificité nulle, bien que pratique, peut entrer en conflit avec des bibliothèques tierces qui utilisent des sélecteurs à haute spécificité, obligeant à ajuster l’ordre de chargement ou à recourir à des sélecteurs plus ciblés.