Le paysage CSS-in-Rente

De nombreuses bibliothèques CSS-in-JS, tout en étant théoriquement agrapités, trouvent leur utilisation principale dans les projets React. Cela est dû en grande partie à l'absence de solution de style intégrée de React, contrairement à Vue, Svelte ou Angular. Cette approche «apporter votre propre» offre de la flexibilité mais nécessite un choix de stratégie de style. Bien que le CSS simple reste une option viable, les bibliothèques CSS-in-JS offrent des avantages tels que:

• COLANCE DE STYLE AVEC LES COMPOSANTS
• Styles à la propagation des composants
• Variations de style axées
• Intégration JavaScript au sein de CSS
• Capacités de théâtre

Chaque bibliothèque offre des caractéristiques uniques, souvent des variations ou des extensions de ce qui précède. Surtout, l'utilisation de JavaScript pour la création de style ne signifie pas toujours l'expédition de style JavaScript. Les bibliothèques "Zero Runtime" compilent les styles de CSS pendant le processus de construction, améliorant les performances.

Cet aperçu est soutenu par Frontend Masters, le partenaire d'apprentissage officiel de CSS-Tricks.

Formation au développement frontal

Frontend Masters propose des cours complets sur les principales technologies frontales, y compris la formation avancée React.

Considérez le cours de réaction intermédiaire

Avant d'explorer les bibliothèques, note:

• Mon expérience avec chaque bibliothèque varie; Les modules CSS sont ma plus étendue. Les démos sont basiques.
• Les corrections et les ajouts sont les bienvenus via les commentaires ou le formulaire de contact.
• L'objectif est de fournir des exemples de code fonctionnel pour une référence facile.

Cadres inclus

• composants coiffés
• Modules CSS
• Émotion
• Suture
• vanilla
• JSS
• Linaria
• Styled JSX
• Goober

Résumés de la bibliothèque

COMPONNANTS STYLED: Extrêmement populaire, connu pour le style dynamique et les variations basées sur les accessoires. Utilise une syntaxe littérale modèle ressemblant à CSS, bien que la syntaxe d'objet soit également prise en charge. Offre SSR, mais n'est pas "zéro runtime".

Modules CSS: Simple, déterminent les styles et encourage la colocation. Sa caractéristique clé est la composition (combinaisons de classe de type mixin). Il s'agit d'une solution de construction uniquement, offrant une véritable capacité "Zero Runtime" lorsque CSS est extrait. Fonctionne avec HMR et est compatible avec SASS. Intégré dans Next.js.

Émotion: permet le style CSS avec JavaScript, fournissant une composition de style, des cartes source, des étiquettes et des utilitaires de test. Prend en charge les styles de chaîne et d'objet. Semblable aux composants stylisés mais avec des différences de performances potentielles. Soutient SSR mais n'est pas zéro-runtime. Le glamour, le glamour et le glamour sont dépréciés en faveur de l'émotion.

Stitches: dispose d'une API de variantes robustes, d'une excellente intégration de l'éditeur de typeScript, d'une prise en charge du thèse et d'une création d'utilité. Offre SSR, approchant de zéro-runtime, mais ne génère pas directement des fichiers CSS.

Vanilla-Extrait: principalement une solution SSR; "Zero Runtime" sauf si les fonctionnalités d'exécution spécifiques sont activées. Fournit une excellente intégration de l'éditeur de typeScript, une API Variants et une API Recipes (similaire aux points). Prend en charge les classes de thème et de services publics via des paillettes. Une alternative forte à l'aphrodite désormais dépréciée.

JSS: inclut l'intégration React, une syntaxe étendue et une architecture de plugin.

Linaria: un pionnier de "zéro runtime" CSS-in-JS, en compilant vers les fichiers CSS mais en conservant un runtime pour les éléments dynamiques. Similaire aux composants stylisés dans l'API. Prend en charge les CS critiques.

Styled JSX: un plugin Babel nécessitant un processus de construction. Utilise un

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

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!