Réflexions sur CSS-in-JS et Utility-First CSS (Tailwind)

Les récentes tâches de développement d'interface utilisateur au travail ont fourni une opportunité précieuse de revisiter CSS-in-JS et CSS utilitaire (Tailwind). Mon rôle quotidien implique rarement du travail en matière d'assurance-chômage, ce fut donc une expérience rafraîchissante, quoique légèrement rouillée. Mon objectif ici est d'offrir une comparaison impartiale des deux approches, en me concentrant sur le flux de travail et les outils de développement.

CSS Tailwind

Le choix de Tailwind par notre équipe a été quelque peu spontané, motivé par une volonté d'efficacité. Même si la familiarité variait et qu'un certain scepticisme existait, le gain de temps était un facteur convaincant.

Aspects positifs

L'intégration, la création de variables personnalisées et le développement de thèmes ont été remarquablement simples. L'extension ou la création de nouveaux thèmes s'est avérée intuitive :

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

L'inclusion de styles de base, même quelque chose d'aussi simple que la suppression de la marge par défaut et du remplissage, a permis un gain de temps considérable. Cela a considérablement rationalisé le flux de travail.

Tailwind vise une expérience intuitive, ce qu'il réalise largement. Cependant, certains aspects semblent moins intuitifs. Les conventions de dénomination des classes, bien que généralement claires (par exemple, p pour le remplissage, mb pour la marge inférieure), présentent des incohérences occasionnelles (par exemple, rounded pour border-radius). Cela peut être atténué grâce à des définitions de thèmes personnalisées :

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

Impressions globales

La lisibilité et la maintenabilité étaient moins problématiques que prévu. Même si la syntaxe nécessitait une période d'ajustement et qu'IntelliSense de VS Code était parfois en retard, le code restait gérable et facile à naviguer, même avec plusieurs classes appliquées à de petits éléments.

Remarque importante : Évitez de trop vous fier à @apply. Cela peut conduire au résultat indésirable de « Tailwind-in-CSS ».

Rendu côté serveur (SSR)

Et surtout, Tailwind n'a présenté aucun problème SSR lors des tests. Son intégration transparente était un avantage significatif.

CSS-in-JS (Émotion)

En 2024-2025, les solutions CSS-in-JS connaissent une baisse de popularité, en grande partie due à la montée en puissance des composants serveur dans des frameworks comme React.

Voir : https://www.php.cn/link/9cb4d40fce0492278209290ee3e4ae31

Défis clés

Le problème majeur vient de la dépendance à l'API Context de React. Mélanger des composants serveur et client dans une application React peut entraîner une perte de données et empêcher les mises à jour de style correctes lors des nouveaux rendus. Cette limitation est inhérente à de nombreuses bibliothèques CSS-in-JS.

Bien que des alternatives compatibles existent, le problème sous-jacent demeure. Le blog de Joshua Comeau fournit un excellent contexte sur cette question.

rétrospective

avec le recul, le passage à CSS-in-JS était moins bénéfique que prévu initialement. Alors que l'expérience de développement contenue (tout dans un fichier) était initialement attrayant, cet avantage s'est avéré moins significatif au fil du temps.

Considérations à long terme

CSS-in-JS a entraîné une augmentation des frais généraux de typage et de configuration. Par rapport au vent arrière, il semblait moins efficace. Tandis que le passage conditionnel des accessoires offre une puissance et une flexibilité:

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

Cela peut également compliquer la compréhension et la refactorisation du code. Les signaux excessifs de la sur (les incohérences du système de conception potentiels:

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

Pour les nouveaux projets, j'éviterais probablement CSS-in-JS.

Variables CSS et thème

Les variables

CSS sont inestimables. Définir une palette une fois et la réutiliser sur les composants simplifie le style, offrant une expérience similaire à l'utilisation de variantes de composants prédéfinis.

<code>const Button = styled.button`
  background: ${props => props.variant === 'primary' ? "#ddd" : "#fff"};
`;

render(
  <div>
    <Button variant="primary">Primary</Button>
  </div>
);</code>

postprocesseurs et configuration

Les postprocesseurs (par exemple, POSTCSS) sont essentiels pour optimiser le CSS. Ils offrent des avantages importants:

• cssnano: supprime le code inutilisé.
• postcss-nested: Active les CSS imbriqués similaires à Sass.
• stylelint: fournit des capacités de liaison.
• autoprefixer: ajoute des préfixes de fournisseurs (bien que moins critiques maintenant).
• postcss-import: Active @import instructions.

(Liste complète: https://www.php.cn/link/2d280461b029134123f1f1a356e176b1 )

En ajoutant des frais généraux, les post-processeurs améliorent l'expérience des développeurs et les performances CSS. Les avantages l'emportent souvent sur l'investissement initial.

Lightning CSS

Lightning CSS (une alternative basée sur la rouille à PostCSS) offre des temps de construction plus rapides et plusieurs des mêmes fonctionnalités. Cela vaut la peine d'explorer si vous cherchez une solution bien intégrée.

Résumé

Le paysage CSS évolue rapidement, avec de nouveaux outils et approches en émergement constamment. Mes expériences avec le vent arrière et le CSS-in-JS ont été informatives, mettant en évidence leurs forces et leurs faiblesses. L'impact du RSC sur les futurs outils CSS est important et mérite une considération supplémentaire.

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!