Bonnes Pratiques Web & Cloud

Le souci de Bootstrap selon moi, c’est que cela reste assez lourd, et que votre site aura toujours un style « bootstrap ».
Approche 4 à l’aide de classes utilitaire avec Tailwind CSS

La dernière approche est l’utilisation de style agnostique et de classes utilitaires. Apparu à la fin 2017, Tailwind CSS est un framework type Lego, où vous allez devoir assembler différents styles utilitaires pour créer votre interface.

Dans l’approche 3, vous constaterez rapidement une grosse répétition de style. Certes, vous aurez différents composants, mais vous vous retrouverez au final avec beaucoup de code en double. Il est possible d’utiliser un préprocesseur CSS, mais cela reste tangible lorsque vous regarderez le code source d’un site codé avec Bootstrap.

Tailwind CSS n’est pas une boite de Playmobil, c’est une boite de Lego. A vous de combiner des styles génériques, et de construire votre propre « bootstrap » en quelque sorte.

Il n’est pas mieux ou moins bien que Bootstrap, il est orienté utilitaire et très pratique pour construire son propre style « proprement ». Tailwind selon moi ne s’adresse pas aux débutants, et vous devez avoir des bases solides pour comprendre la composition des classes.

CSS has natural fallback mechanisms such that if the browser doesn't understand a property:value combination, then it will ignore it and use something declared before it if there is anything, thanks to the cascade. Sometimes that can be used to deal with fallbacks and the end result is a bit less verbose. I'm certainly not a it's-gotta-be-the-same-in-every-browser kinda guy, but I'm also not a write-elaborate-fallbacks-to-get-close kinda guy either. I generally prefer a situation where a natural failure of a property:value doesn't do anything drastic to destroy functionality.

That said, @supports certainly has use cases! And as I found out while putting this post together, plenty of people use it for plenty of interesting situations.