web-dev-qa-db-fra.com

Composant stylé vs jss vs emotion pour React

J'essaie de comprendre le meilleur choix (en tant que CTO) entre

  • jss
  • émotion
  • composant de style.

Je vais essayer de ne pas rendre la question "trop ​​large" ou "hors-sujet", car c'est un sujet très subjectif. Je vais essayer de répondre (ici) à la question moi-même si personne ne répond à l'ensemble, et je vais poser des questions très fermées:

  • Comment les trois peuvent "compiler" (css externe, <style> tag, style= les attributs) ?
  • Comment les trois peuvent s'intégrer en douceur avec CRA (sans trop de réglages et sans éjection)?
  • Qu'en est-il du POV OpenSource (âge, communauté, plugins, support)?
  • Et la performance?

S'il vous plaît, je ne veux pas que cette question soit fermée, donc je ne veux pas d'opinions de style code et je veux éviter les PDV subjectifs.

cssreactjsstyled-componentsjssemotion
15
Cyril CHAPON

Une réponse très courte (il y a beaucoup plus à faire en général)

  1. Chaînes de modèle CSS

SC analyse les chaînes de modèle avec CSS pendant l'exécution. Emotion a un plugin babel pour préparer ces choses analysées dans un format qui peut rendre le CSS final au moment de l'exécution plus rapidement. JSS ne prend actuellement en charge que chaînes de modèle de base et utilise autrement des objets (il est prévu d'ajouter une meilleure prise en charge des chaînes de modèle)

  1. Mise à jour des règles de style

SC et Emotion génèrent de nouvelles règles CSS lorsque vous mettez à jour des styles dynamiques, JSS mettra à jour les règles existantes (notez que vous pouvez voir les règles mises à jour dans l'onglet styles des outils de développement, mais pas dans la balise de style): reproduction

  1. Dépendance à réagir

SC ne réagit que. Emotion a une syntaxe qui peut être utilisée sans réagir (css ''). JSS a des packages séparés: jss (core, no react), react-jss (classes d'injection HOC), styled-jss (SC like API).

  1. Plugins

Actuellement, seul JSS prend en charge les plugins.

  1. Extraction statique

    Actuellement, seul Emotion prend en charge l'extraction statique complète. JSS y travaille également. Vous pouvez obtenir une extraction statique avec JSS aujourd'hui si vous placez des styles dans des fichiers séparés (quelque chose.styles.js) et les extrayez à l'aide d'un plugin webpack (pas de valeurs dynamiques cependant).

  2. Performance

http://necolas.github.io/react-native-web/benchmarks/

  1. Tous génèrent du CSS réel à l'aide d'une balise de style.
1
Oleg Isonen

Comme réponse ci-dessus, je n'ai pas entendu parler de JSS et d'émotion non plus. Probablement parce qu'ils ne sont pas si communs en combinaison avec React. J'ai moi-même utilisé régulièrement du CSS, du style en ligne, des modules CSS et maintenant les derniers composants stylisés.

J'aime les composants stylés car ils sont faciles à utiliser. Alors répondez à (certaines de) vos questions.

  1. Voir l'image. Voici comment il se compile avec les composants stylisés. Il crée des classes uniques.
  2. Pas besoin d'éjecter. Il suffit de l'importer depuis npm et d'utiliser
  3. Pensez qu'il devient de plus en plus populaire et la communauté semble l'aimer. Il y a toujours des opinions différentes et il y en a aussi beaucoup qui n'aiment pas mélanger le style et le code JS dans les composants.
  4. Je n'ai vraiment pas vérifié les performances, mais cela semble rapide. =)

enter image description here

0
weibenfalk