Quel est l'avantage d'utiliser des composants stylés par rapport aux modules css dans Reactjs
J'ai recherché quel était le meilleur moyen de styliser votre page dans l'application React. Je vois beaucoup de bibliothèques dans lesquelles styler réagissent comme Styled Components, Glamour, CSS Modules.
Dans mon projet actuel, j'utilise des modules CSS (principalement pour éliminer les conflits CSS et les CSS spécifiques à une page). J'ai beaucoup cherché sur Google pour savoir pourquoi utiliser des composants stylés et CSS-in-JS, mais je n'ai pas pu obtenir de réponse concrète. Ma question est donc la suivante: si l'utilisation de CSS-in-JS ou de composants stylés présente des avantages en termes de performances, ou s'il s'agit simplement d'un sucre syntaxique.
J'ai de l'expérience avec les deux technologies, j'ai utilisé Radium (une autre bibliothèque CSS dans JS) et j'utilise actuellement des modules CSS dans mes projets. Les composants stylés sont certainement bien meilleurs que Radium car ils vous laissent styliser: états de survol, etc. Mais à mon avis, les modules CSS restent le meilleur choix, surtout si vous voyez que votre projet dépassera 10 à 50 composants. Le partage de code entre CSS dans les bibliothèques JS est un cauchemar. D'autre part, les modules CSS vous permettent de composer d'autres classes, d'importer des variables à partir d'autres fichiers CSS et même JS peut importer des variables à partir de CSS.
L'une des raisons pour lesquelles j'aime les composants stylés plus que toute autre façon d'écrire des CSS dans un écosystème basé sur React est qu'elle applique les meilleures pratiques. Comme quelqu'un l'a écrit, le partage de code lors de l'utilisation de composants stylisés est un cauchemar et je suis tout à fait d'accord avec cela. C'est là que la partie relative à l'application de la loi entre en jeu. Si vous n'écrivez pas de composants vraiment modulaires, la hiérarchie des composants React doit être conçue ( composants atomiques composés pour construire des modules riches en fonctions), vous allez sûrement réécrire des styles similaires un grand nombre de fois. Mais si vous pouvez décomposer et composer vos composants de manière vraiment ascendante en utilisant des composants stylés (ou même des styles en ligne si vous préférez), le partage de code n'est plus un problème. Le partage de code supplémentaire ne devrait pas être un problème discuté au niveau du style, mais le partage des encapsulations devrait plutôt être un composant au niveau des composants dans la plupart des cas. Les modules CSS sont à mon avis un simple outil limitant la portée de className, tandis que les composants stylés fournissent une approche plus déclarative du style dans les projets basés sur React.
Le type de structure de composant imbriqué que les composants stylés entraînent vient à l’un des inconvénients que je n’ai pas encore compris. J'ai essayé de rester plus sémantiquement conscient lorsque je nommais mes composants de style, mais je suis sûr qu'il pourrait exister une autre technique pour y remédier. Je ne trouve pas que cela pose trop de problèmes moi-même et, par conséquent, je n’ai pas fait beaucoup d’efforts pour le résoudre.
Les composants stylés seraient probablement un peu moins performants que les modules css car la création de composants destinés à leur style et à leur rendu impliquait certes des frais généraux, mais ce serait une différence minime.
Peut utiliser des attributs HTML normaux, vous pouvez mélanger dans JS si vous le souhaitez, il prend en charge les requêtes d'états, d'imbrication et de supports. Et non, tout ne se retrouvera pas dans style = "" mais créera un "réel" attribut class = et extraira le CSS en tête, tout comme css-modules.
Il vous permet même de styler des composants personnalisés (pas seulement HTML) s'ils acceptent uniquement className comme prop, ainsi:
const Button = (props) => <button className={props.className}>{props.children}</button>
const CustomButton = styled (Button)
display: inline-block;
padding: 5px;
const Item = () => Cliquez sur moi!
Même si elle présente également des inconvénients, comme d’autres technologies. Le principal est que le partage de code entre plusieurs projets pourrait devenir très difficile
Si votre priorité est la vitesse, des composants glamour ou stylés sont exactement ce que vous pouvez utiliser dans vos applications Web. Écrire des styles dans des chaînes pour des composants stylés peut sembler inhabituel, mais les visiteurs apprécieront la page Web chargée rapidement. Si vous décidez d'utiliser des composants stylés, n'oubliez pas de installer le plugin pour prendre en charge la coloration syntaxique dans les chaînes ou peut-être aider à en créer un nouveau.
Les styles sass/css et inline sont également assez rapides, mais si vous décidez de réutiliser votre code pour votre application React Native, préparez-vous à réécrire vos feuilles de style. Par contre, les préprocesseurs css et autres styles constituent un bon choix pour les applications Web.