Pourquoi Tailwind CSS ne fait pas l'unanimité ?
ฝัง
- เผยแพร่เมื่อ 27 ก.ย. 2024
- Quand on souhaite passer un cap en CSS, en tant que développeur web, on se pose la question de quelle nouvelle techno aborder pour "level up" ! Méfions nous des faux amis, de ces outils qui en apparence semble révolutionner la matière mais qui dénaturent des principes établis pour de bonnes raisons !
➡️ 50% de réduction sur Elephorm avec le code HUGO50 :
LIEN : bit.ly/Elephor...
✅ - Tu souhaites devenir développeur(euse) ?- ✅
devclub.fr/men...
🧑💻- Rejoins nous sur devclub.fr - 🧑💻
devclub.fr/
👾 - Discord - 👾
/ discord
🚀 - Mes réseaux - 🚀
github.com/Hugtas
/ hugo_devclub
/ hugo_devclub
#codercestcool
Envie d'un accompagnement personnalisé ? Rejoignez mon programme de mentorat pour bénéficier de mes conseils d'expert et d'un accompagnement professionnel sur-mesure ! Rendez-vous sur devclub.fr/mentorat pour plus de détails et réserver votre séance dès maintenant !
+1
Entièrement d'accord sur ce que tu as dit sur tailwind, d'abord maîtriser les bases avant de suivre la techno à la mode ! Team postcss 😉
hello, tu devrais lire les quelques article de Adam W. "css-utility-classes-and-separation-of-concerns" pour une compréhension du couplage et l'efficacité des classes utilitaires.
Maîtriser le langage avant le framework. C'est primordial.
Assurément !
J'ai tenté tailwind 10 mins, je me suis retrouvé avec des balises beaaaaucoup trop lourdes à mon goût. Déjà avec bootstrap je trouve ça moche mais là c'est pire. (Après c'est clair que j'ai pas pris le temps de maîtriser tailwind comme il faut) CSS et sass pour moi, c'est à mon sens la meilleure façon de travailler
"Après c'est clair que j'ai pas pris le temps de maîtriser tailwind" -> "CSS et sass pour moi, c'est à mon sens la meilleure façon de travailler"
lol x)
perso je suis full tailwindcss, je n'ai plus de css ni de sass. Niveau rapidé de developement c'est super. Le markup html devient très parlant. Je peut voir a quoi ça ressemble juste en regardant le html. rien qu'entre une div en flex-col et une div en flex-row ça parle. Pareil avec les padding / margin que je visualise en un coup d'oeil.
Perso pour moi y a pas de retour en arrière. Et pourtant je maitrise très bien css / sass.
Le problème du css c'est qu'on se trouve avec des classes bidon genre .article, .article-title etc... et ça n'est pas parlant du tout, obligé d'aller lire le css.
Pour le @apply je ne l'utilise pas car ça revient au même que css avec des classes qui ne veulent pas dire grand chose.
Et s'il a trop de classes sur un élement c'est le markup en lui même qui ne va pas, il faut mieux le découper et le hierarchiser.
Je pense que le passage de sass a tailwind à divisé par 2 le temps de développement de la partie html/css du front. Je me surprends encore moi même des fois de la rapidité avec laquelle je peut créer des composants, j'écris tout le markup d'une traite en visualisant le rendu dans ma tête sans même le tester dans un navigateur et généralement il n'y a pas tant de retouches que ça à faire, ça ressemble assez à ce que j'ai imaginé.
Merci pour ton avis :)
salut, j'apprends tailwind en ce moment et avec tailwind intellisence, j'ai toujours un backslash (\) avec les class tailwind avec l'autocomplletion. est-ce que tu peux m'aider a l'enlever stp, merci
@@cocokifzuka5254 salut, désolé je suis sur phpstorm, je pourrais pas trop t'aider, y a ptet un plugin tailwindcss a installer
@@Lk77ful salut, merci pour ta reponse, je vais voir alors
2 ans plus tard et tout pareil, je ne pourrais plus jamais me passer de Tailwind, après 7 ans de CSS / SASS, Tailwind a trouvé la solution au CSS hell et les noms de classes jamais respecté dans le temps « parce qu’il fallait faire un quickfix »
Tu passes d’un projet à l’autre et que ce soit toi ou un collègue qui à écrit le markup, c’est comme si t’étais resté a la maison, et puis fini le jump entre fichiers .TSX et .SASS
Bref, pour les novice, apprendre les bases et après les avoir bien maitrisé sautez sur Tailwind!
Totalement d'accord avec cette vidéo !
J'aime trop cette sortie. J'aime trop cette sortie. Que la vérité, la pure vérité
Je parcourais TH-cam justement pour comprendre pourquoi tant de hype sur TW et, je suis tombé sur ta video, tu me confortes dans ce je pensais.
Je prefère le CSS pure, très bonne video !
Toutefois,j'aurai été curieux d'avoir ton avis sur " Styled component"
Je ne connais pas assez malheureusement pour avoir un avis dessus 😮
@@devclub_fr ah oui ? Leut etre le sujet d'une de tes prochaines vidéos 😉 , je te conseil d'y jeter un oeil c'est vraiment pas mal, celà se raproche plus de la phylosophie de Sass
Moi j'ai toujours détester Tailwind css parce j'aime pas voir du style entre mes codes html...
Ah, ça fait du bien un peu un avis contradictoire sur tailwind.
A chaque fois que je demande ce que tailwind est censé résoudre comme problème, jamais personne n'a réussi à me répondre...
après 2 ans de sass, j'ai découvert tailwind css et le krush direct. finis de chercher comment appeler sa classe que tu modifie plusieurs fois pour que cela soit cohérent. finis de créer un dossier juste pour y mettre son module. finis de switch entre le style et le html. alors oui le jsx semble un peu surchargé mais pour tous les avantages apportés c'est un petit sacrifice et visuellement cela renter pas en collision avec le js. dire que l'on revient au pratique d'avant c'est complètement faux. avant il n'y avait pas ce traitement lors de build qui change littéralement tout donc non on se fait pas de retour en arrière. c'est bien plus simple pour designer et de plus la gestion des font size et autres est assez incroyable.finis les pixel figés c'est sass qui devient obselète limite. et pour les entreprises c'est un outil qui trace une ligne de conduite naturellement et permet à l'entreprise de réaliser des gains conséquents en terme de moyen humain et de temps. et puis tu dis que la hype va redescendre mais tailwind c'est pas bootstrap. juste 2 chemins se profilent pour le css : soit sass pour compartimenter son code avec ses inconvénients soit tailwind dans le html avec ses inconvénients qui sont différents. Et pour bien faire comprendre aux débutants qui veulent démarrer cette vidéo n'est pas objectif. Enormement d'entreprises switch sur tailwind pour des raisons évidentes et donc cette techno va certainement persister longtemps et n'est pas une simple hype comme il le prétent. c'est un salarié lambda qui a uniquement une vision de développeur. faites votre propre choix et creuser le sujet
Dommage, ton commentaire était intéressant, voir constructif, jusqu'à "c'est un salarié lambda qui a uniquement une vision de développeur". Il s'agirait de grandir et d'éviter de prendre une opinion comme une attaque personnelle. Peace ✌!
Entièrement d'accord, les classes tailwind allongent trop le code.
Jamais compris pourquoi ça dérange personne qu'avec tailwind on déclare le style dans les attributs classe qui ont été conçus au contraire pour standardiser et découpler le style de la structure. En poussant mémé dans les orties, si on continue, on aura le retour en grâce des balises ,,, ... 😆HTML4 FTW !
Sass et le top
Rien que pour l’avis je m’abonne 😜
Salut, c'est quoi le lien sur les jeux CSS ? ça m'intéresse. Tailwind je découvre ..et je ne suis pas fan, je préfère le CSS pur ou les styles-components.
Absolument vrai. je préfère le garde le plus loin possible de moi.
Mais il y a des choses intéressantes en terme de théorie, notamment leur système de couleurs, de spacing etc. explorer leur doc est vachement utile pour progresser en ui 😁
Je ne suis pas pour les frameworks CSS, mais le point qui me retient c'est le style cross-browser. Cela donne l'assurance d'une conformité entre chaque device/browser. Enfin, je crois que c'est le cas ? (je n'ai pas beaucoup d'exp. avec Tailwind)
Oui quand les outils permettent de faire du cross-browser, c'est toujours un plus :) les deux le font il me semble !
En 2023, cette question se pose beaucoup moins qu'il y a 15 ans et tend à s'uniformiser avec le temps.
Je suis un grand fan de ce que tu fais, j'apprécie beaucoup tes valeurs et ça me tient à cœur, mais là ... je ne suis absolument pas d'accord avec ton opinion sur Tailwind. Le développement à pas mal bouger depuis ses débuts, Aujourd'hui les frameworks JS sont omniprésents, tout devient composants et c'est la la force de TW. Grâce à TW, tu crées tes composants sans toucher au CSS, tu utilises tes props pour pour définir au besoin les couleurs, la taille, les espacements au besoin tu rajoutes un petit hack de classes pour ajuster ton design,... Je trouve ça très adapter et ça en reviens à faire un custom framework, si tu cherches à modifier tout tes boutons pour changer un effet hover, tout est à la même place dans un fichier unique, tu n'as pas à te casser la tête à revenir sur des CSS que tu n'as plus touché depuis des plombes pour tout retrouver. Personnellement je mets en composant tout se que j'utilise plus d'une fois dans mon code (comme tout le monde tu me diras) et TW me permet l'aller vite, de standardiser, d'augmenter l'accessibilité car je fais tout en une fois.
Pour ce qui est de la lisibilité c'est comme en CSS, je ne mélange pas les boîtes, la couleur et le responsive j'utilise toujours des espaces supplémentaires et un ordre précis dans mes classes, je sais par exemple que la forme, la taille et l'espacement sera toujours au bloc 1 qu'on suivra avec les bordures, les BG, les couleurs, ... ça permet de modifier très rapidement et sans réflexion n'importe quoi.
La seule remarque que je me fais avec TW c'est on est tous d'accord que le CSS ne prend pas de place, que les sélecteurs sont directement dans le code HTML et sont donc très rapides pour le navigateur mais quel est l'impact de l'augmentation de la taille du code HTML? Bizarrement personne n'en parle...
J'ai repris le code très récemment pour me reconvertir professionnellement suite à une perte d'activité dans mon domaine pro, j'ai découvert TW dans la foulée suite à des recommandations et moi qui déteste les frameworks (pas les avantages, mais la standardisation) je trouve ça vraiment très sympa, au début c'est bien, on se dit on fait plein de chose avec, mais à coté de pas mal de custom CSS, ... puis on commence à maitriser et finalement on à ptet plus besoin d'autant de CSS et pour finir, les CSSS se résument aux animations et encore c'est tellement spécifique qu'on les place pas dans les composants.
Moi je suis pour, "testez le" et après quelques temps vous verrez combien de temps vous aurez gagné... et combien de temps vous gagnerez...
Si tu y trouves ton bonheur c'est le principal ^^ ! Merci pour ton avis !
@@devclub_fr Mais ça ne veut pas dire que je n'aime plus le CSS
Maîtriser les bases.
Perso je l'utilise, mais régulièrement et pour x raisons, je bascule sur le css classique, j'ai du mal à comprendre comment on peut utiliser tailwind sans connaitre sur le bout des doigts le css en vrai
Bonjour Hugo,
Je viens de découvrir cette vidéo et je suis en apprentissage pour devenir développeur front-end.
Alors moi j'utilisais du pure CSS, et alors que je galérais un max pour créer une nav bar responsive avec un menu hamburger (avec Javascript...etc):
Un ami m'a montré qu'avec bootstrap, en faisant juste copié/collé de bouts de code predefinis sur le site de bootstrap, on peut avoir différentes navbar hyperclass Et En Plus, avec un bouton dark/light mode 😅
A partir de là, je n'arrive plus à trouver de raisons de ne pas utiliser bootstrap ou tailwind...
Si tu peux m'éclairer un peu là-dessus stp ?
Le problème c’est que le jour où les devs seront moins indispensables, comme avec l’ia par exemple, deux catégories vont se former. Ceux qui auront appris les fondamentaux et sauront évoluer et ceux qui se seront reposés beaucoup trop sur les plugins/libs etc. Je ne dis pas qu’il ne faut pas les utiliser, mais il vaut mieux comprendre à minima comment ça fonctionne derrière.
C’est comme pour tout, si c’est trop simple, c’est que tu y perds quelque chose 😌 ! Mon conseil : apprendre et comprendre, puis ensuite accélérer grâce aux outils 🙌
@@devclub_fr Je comprends mieux 👍🏻 Merci pour ta réponse Hugo
Hello merci pour cette vidéos trés interressente comme toujours ! je me pose une question peut on uttiliser sass plus tallwind sur le même projet et c'est déconseiller ??
Tu peux utiliser les deux si tu le souhaites, quand j'utilisais Tailwind je faisais du CSS classique à côté pour des choses plus pointues, donc je suppose que tant que tu as un loader sass dans ton projet, ça fonctionne 😉
Il manque les combinators a tailwind
Y'a quasiment rien à apprendre pour utiliser tailwind, juste des noms de classes familiers si on a déjà utilisé bootstrap ou consorts, après c'est possible de configurer,/d'étendre Tailwind mais pas nécessaire.
Et comme c'est du 1:1 vers CSS + documentation excellente c'est encore plus simple et ça peut limite perfectionner le CSS de ceux qui ont en besoin, vu que la cible de Tailwind c'est surtout les devs backend/partie logique du frontend qui sont pas spécialement bons niveau design ça tombe bien.
En plus d'apporter des bases seines via les spacing/couleurs etc par défaut y'a une commu pas mal donc facilité de c/c des composants en plus de Tailwind UI.
À chaque outil son utilité, c'est comme si tu demandais à un dev frontend de manage des clusters kubernetees au lieu d'utiliser Heroku parceque l'un est Paas qui va pas t'apprendre grand chose et l'autre une vraie techno qui à plutôt l'air d'être là pour durer.
Loin de moi l'idée de dire que tout est à jeter, juste que ça ne résout rien. Comme tu le dis, c'est du 1:1 CSS, donc pourquoi ne pas faire du CSS ? La différence avec ton exemple Kubernetees/Heroku, c'est que le PAAS offre à ceux qui ne peuvent investir leur temps dans de l'apprentissage devops ou n'ont pas les ressources pour le faire, la possibilité de déployer et maintenir des apps. Dans ce sens, un bootstrap serait beaucoup plus proche de cette idée, qu'un tailwind. Pour faire quelque chose de bien avec Tailwind, il faut comprendre la "théorie" du CSS, ça n'en dispense pas à mon avis :) !
Merci pour ton témoignage et ton opinion ;)
@@devclub_fr Ouais faut déjà avoir quelques bases en CSS, ça dispense pas de les connaître comme avec les "frameworks" type bootstrap, material UI et compagnie mais ça résoud quand même des problèmes selon moi.
Déjà si on part dans l'optique que c'est fait pour être utilisé avec un framework JS qui utilise des components et qu'on veut justement des components facilement transférables d'un projet à un autre c'est plus pratique que d'avoir à aussi transférer le fichier CSS, y'a des libraires CSS in JS pour ça mais ça en joue justement rôle.
Ensuite bien qu'il faille avoir des bases en CSS Tailwind donne quand même des bases assez solides pour permettre aux non designers de rester cohérent, que ce soit au niveau des spacing/couleurs etc, ce que n'offre pas une solution de CSS in JS lambda.
Et enfin l'éco système autour qui permet aux gens pas très bon en design d'avoir des components ou templates facilement modifiable et facilement utilisable vu que tout tient dans le même fichier. Un framework comme Bootstrap est tellement opinionated que tu vas te retrouver avec 1/3 de Bootstrap et 2/3 de custom CSS. Sans oublier que Bootstrap c'est aussi du JavaScript et que c'est pas forcément ce que ceux qui sont mauvais en design recherchent, donc cleaning à prévoir si t'utilises pas Vanilla JS.
Voilà pour moi Tailwind est pas mal pour ceux qui ont des bases en CSS, utilisent framework JS et sont pas forcément top en design, ça permet à un dev backend ou JS d'avoir quelque chose de visuellement acceptable alors que sans il aurait peut être perdu plus de temps pour un résultat moins bon.
Jamais utilisé ce framework au design alléchant. Quand on voit qu'il est payant surtout. Mais on va pas se mentir, c'est de la grosse daube. Qui plus est aucun composant utilisable comme tel sans payer. Bref à éviter. Le html se doit de rester clean pour une meilleure compréhension. Tailwind à juste su faire une bonne pub avec des designs alléchants. Mais au final pas besoin de tailwind pour reproduire ce genre de design.
Bref, fuyez cette merde, il y a d'autres frameworks css gratuit bien meilleur qui font largement le taf.
Tailwind est adapté pour certains use case je trouve, notamment quand on prototype. Ça résout un problème pour moi : ne pas avoir à passer des plombes à inventer des noms de classes.
Nommer une chose c'est déjà devoir trouver une abstraction, et suivant la maturité du produit ça peut être un obstacle dont on se passerait bien en début de projet.
L'abstraction finie souvent par apparaître toute seule au niveau du composant front, c'est lui qu'on nomme correctement et c'est à lui qu'on attache un style. Une fois qu'on a le composant, on l'utilise et tailwind devient invisible dans les vues.
Bien vu :)
Super vidéo Hugo !. En tant que junior je suis rassurée d’avoir de meilleurs affinités avec sass qu’avec tailwind. Merci pour ton partage, super boulot !
Complètement d'accord. Je ne comprend pas non plus cet engouement sur Tailwind pour les même raisons de maintenabilité dans le temps et de surcharge du html. Et puis, à mon sens, bootstrap à lui aussi ses classes utilitaires donc pourquoi le bouder autant ? Car il embarque des composants inutilisés en plus ? => on est pas obligé de tout importer. Personnalisation compliqué ? => Il suffit de redéfinir les variables. Perso je fais toujours mon CSS à la main et j'utilise les utiles de bootstrap en complément quand j'en ai besoin.
Le plus important pour moi est que le développeur du projet soit le premier à pouvoir s'y retrouver. Ensuite, s'il peut penser aux autres de la team c'est mieux :)
Team sass 😎
Une soirée Battle pourrait être sympa ;-)
Oui, ça sera cool, on fera ça ^^ !
Tres bonne vidéo comme d'habitude 👍
Pourquoi tu ne propose pas une formation TH-cam sur Sass ainsi tu montre la cohérence et aide en même temps je suis allé regardé ta playlist j'aurais aimé trouvé une tel formation
Bonjour Hugo, avant même de citer les variables et les mixin de Sass, j'aurai commencé par la clarté du code, rien qu'avec l'indentation et l'imbrication des classes. Je l'ai utilisé avec une syntaxe de type BEM (Block Element Modificator) et une structure de dossier 7-1, et c'était un véritable plaisir. Sans parler du code maintenable, il me semble que c'est le leitmotiv de toutes entreprises IT, non?
Je suis pas fan de l'indentation de SASS, j'utilise la syntaxe classique SCSS avec les accolades mais sinon oui bien sur le système d'imbrication est très utile ! :)
Une vidéo pleine de vérité 👍
En fait, Tailwind c'est du CSS atomique, ce sera donc très adapté pour un développement orienté composant. C'est tout, le reste c'est effectivement de la hype.
Perso j'ai mon propre petit stock de classes utilitaires et elles ne sont pas si nombreuses.
Je suis d'accord avec toi. Ça pollue bcp l'HTML.
J'ai eu la même réflexion, c'est pourquoi j'ai décidé d'apprendre du pur css
Complètement d'accord avec toi...
excellente video
Merci !
Je me suis penché sur tailwind et je arrivé à la même conclusion j’aime bien séparer les2. Un mix entre en les var CSS et le Scss.