Pourquoi je n'aime pas Tailwind CSS : le point de vue d'un développeur frontend junior

En tant que développeur frontend junior, j'ai expérimenté diverses approches CSS dans ma quête pour trouver le moyen le plus efficace et le plus maintenable de styliser les applications Web. Mon parcours m'a fait passer du CSS Vanilla à Bootstrap et Material-UI (MUI), m'a finalement conduit à adopter les solutions CSS-in-JS, en particulier Emotion avec ses composants stylisés.

Au fil du temps, je suis parvenu à me forger des opinions bien arrêtées sur les différentes méthodologies de coiffage. Un outil populaire qui ne m'a pas convaincu est Tailwind CSS. Malgré son adoption généralisée, je trouve cela compliqué à comprendre.

Mes problèmes avec Tailwind CSS

Bien que Tailwind CSS ait gagné en popularité, j'ai trouvé plusieurs aspects qui ne correspondent pas à mes préférences de développement :

• Problèmes de lisibilité : l'approche utilitaire de Tailwind conduit souvent à de longues chaînes de classes dans les éléments HTML. Cela peut rendre le code difficile à lire et à comprendre en un coup d'œil.
• Séparation des préoccupations : Tailwind mélange le style directement dans le HTML, ce qui va à l'encontre du principe de séparation de la structure de la présentation. Cela peut rendre plus difficile la maintenance et la mise à jour des styles dans un projet de grande envergure.
• Complexité de personnalisation : bien que Tailwind soit personnalisable, cela nécessite souvent une configuration supplémentaire. Cela peut être plus complexe que la simple écriture de CSS personnalisés ou l’extension de composants stylisés. Ces problèmes m'ont amené à explorer des alternatives, m'amenant finalement à découvrir et à apprécier les composants stylés.

Que sont les composants stylisés ?

Les composants stylisés sont une solution CSS-in-JS qui vous permet d'écrire du code CSS réel pour styliser vos composants. Ils vous permettent de définir vos styles à l'aide de littéraux de modèles JavaScript, en les limitant à des composants spécifiques et en réduisant le risque de conflits de style.

const Button = styled.button`
  background-color: blue;
  border-radius: 4px;
`;

Ma structure de composants préférée

L'une des principales raisons pour lesquelles j'aime les composants stylisés est la façon dont ils s'intègrent à la structure de mon projet préférée. Pour chaque composant, je crée généralement un dossier dédié avec les fichiers suivants :

MyComponent/
├── MyComponent.tsx
└── MyComponent.styles.ts

Cette séparation me permet de garder la logique de mon composant propre et ciblée tout en conservant un lien étroit entre le composant et ses styles.

Avantages de cette approche

• Lisibilité améliorée : en séparant les styles dans leur propre fichier, la logique des composants et les styles deviennent plus lisibles. Je peux analyser rapidement le fichier .tsx pour comprendre la structure et le comportement des composants, et me référer facilement au fichier .styles.ts pour les détails de style.
• Modularité et réutilisabilité : les composants stylisés sont intrinsèquement modulaires. Je peux facilement réutiliser des styles sur différents composants ou créer des variations d'un composant en étendant son composant de style de base.
• Sécurité des types : lors de l'utilisation de TypeScript, les composants stylisés offrent une excellente sécurité des types. Je peux définir des types d'accessoires pour mes composants stylisés, en m'assurant que j'utilise les bons accessoires pour le style.
• Refactoring facile : si je dois modifier la structure ou le style d'un composant, le fait d'avoir des fichiers séparés facilite la localisation et la modification du code pertinent sans affecter les autres parties de l'application.
• Style dynamique : je peux facilement créer des styles dynamiques basés sur des accessoires ou des valeurs de thème.

Conclusion

Bien que Tailwind CSS offre une approche unique du style avec sa méthodologie axée sur l'utilitaire, mon expérience en tant que développeur frontend junior m'a amené à préférer les composants stylisés. La clarté, la modularité et l'intégration JavaScript des composants stylisés s'alignent mieux avec mon flux de travail et mon modèle mental de développement basé sur les composants.

Cependant, il est important de reconnaître que différents projets et équipes peuvent avoir des besoins différents. Tailwind CSS peut être un excellent choix pour le prototypage rapide ou les projets avec des systèmes de conception spécifiques. Comme pour tout outil dans le vaste monde du développement Web, la clé est de comprendre les compromis et de choisir l’approche qui correspond le mieux aux exigences de votre projet et aux préférences de votre équipe.

En fin de compte, l'objectif est de créer des applications Web maintenables, évolutives et visuellement attrayantes. Que vous choisissiez Tailwind, des composants stylisés ou une autre approche, ce qui compte le plus est la cohérence et la capacité à fournir efficacement des résultats de haute qualité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!