Nous allons découvrir CSS-in-JS, les pouvoirs de cette technique et comment créer de meilleures applications en écrivant notre code CSS avec JavaScript.
Dans cet article, nous allons en savoir plus sur CSS-in-JS, une manière différente de styliser nos éléments dans les applications. Cette technique est utilisée depuis longtemps dans la communauté, et de nombreux développeurs trouvent qu'ils ont un meilleur style de composition dans leurs applications et rendent leurs éléments CSS et leur code plus propres, plus beaux et plus faciles à gérer.
Dans cet article, la plupart des exemples seront liés aux applications React, mais CSS-in-JS n'est pas une chose spécifique à React – c'est une technique pour styliser les applications et peut être appliquée dans n'importe quel autre framework ou bibliothèque. Pour comprendre CSS-in-JS, nous allons d'abord en apprendre un peu plus sur CSS en général dans React et sur la façon dont nous dénommions nos applications avant l'essor de CSS-in-JS. Ensuite, nous allons en apprendre davantage sur les modules CSS, une autre technique de style des applications React qui ont été largement utilisées pendant un certain temps par de nombreux développeurs. Après cela, nous allons couvrir CSS-in-JS, pourquoi il a été tellement utilisé récemment par les développeurs, ses avantages, etc.
CSS, en général, a toujours été un sujet populaire et important sur le Web, et La façon dont nous modélisons nos applications a toujours été un sujet de discussion et d'étude pour de nombreux développeurs, nécessitant une étude pour comprendre ce qui serait le bon choix pour une situation ou une application spécifique. Au début, nous avions un moyen simple et facile de styliser nos applications, un moyen bien connu de presque tous les développeurs: créer un simple fichier .css et, à l'intérieur de ce fichier, vous pouvez organiser, modifier et styliser tout élément de votre application que vous souhaitez. Mais une fois que vous avez un fichier .css et que vous commencez à styliser vos éléments, votre application et principalement votre code CSS vont augmenter en taille, vous devrez donc commencer à réfléchir à d'autres façons d'organiser votre Code CSS et rendre votre application plus simple, plus facile à maintenir, contenir du code plus propre, etc.
La technique de CSS-in-JS est essentiellement venue pour résoudre ce problème particulier afin que vous n'ayez pas une tonne de . fichiers css et vous n'aurez pas à gérer votre code CSS comme nous le faisions auparavant, dans certaines situations devant appliquer des techniques telles que BEM OOCSS etc. pour obtenir un meilleur code et améliorer votre application.
Apprenons quelques façons de styliser nos applications React – certaines méthodes que nous utilisions avant la montée en puissance de CSS-in-JS, puis nous allons passer en revue l'introduction de CSS-in-JS. Enfin, nous allons en apprendre un peu sur certaines bibliothèques que nous pouvons commencer à utiliser aujourd'hui pour avoir un meilleur style de composition dans nos applications.
CSS dans React
Dans React, avant l'essor de CSS-in JS, le moyen le plus utilisé pour travailler avec CSS était d'utiliser des modules CSS. Mais que sont exactement les modules CSS?
Un module CSS est essentiellement un fichier .css où vous mettrez tout votre code CSS, comme les noms de classe, les identifiants, les animations, etc. et, à chaque fois il est importé, les noms et les animations à l'intérieur de ce module CSS spécifique sont étendus localement au composant par défaut. L'idée principale des modules CSS est que chaque composant possède son propre fichier .css et est un processus qui se produit au moment de la construction qui modifiera les noms de classe et les sélecteurs que vous devez délimiter.
Par exemple, pour commencer à travailler avec des styles en ligne, il vous suffit de créer un objet JavaScript et de passer des options pour styliser votre élément, comme ceci:
const styles = {
fond: "# FE0000",
couleur: "#FFFFFF"
};
Ensuite, dans votre élément, vous le passez dans l'attribut style comme ceci:
CSS-in-JS
Mais l'utilisation de styles en ligne a ses limites car nous n'avons pas toutes les fonctionnalités de CSS dans des objets simples comme celui-ci. Donc, pour avoir un meilleur style dans notre application, nous devons aller dans une bibliothèque; dans ce cas, je vais utiliser des composants stylisés.
Tout ce que vous avez à faire est d'installer des composants stylisés:
fil ajoutez des composants stylisés
Ensuite, importez-le dans votre composant React:
import styled from "styled-components";
Pour commencer à utiliser les composants stylisés, il vous suffit de créer un objet à l'aide de littéraux de modèle, comme ceci:
const StyledButton = styled.button`
largeur: 120 px;
hauteur: 42px;
fond: # FE0000;
couleur: #FFFFFF;
"
Ensuite, pour utiliser ce "composant" que nous avons créé, il suffit de le passer. Au lieu d'un élément de bouton natif, nous passons le bouton que nous avons créé, comme ceci:
import React from "react";
importation stylisée à partir de "composants stylisés";
const StyledButton = styled.button`
largeur: 120 px;
hauteur: 42px;
fond: # FE0000;
couleur: #FFFFFF;
"
bouton const = () => (
Mon bouton stylé
);
bouton d'exportation par défaut;
Nous pouvons également effectuer un rendu basé sur des valeurs conditionnelles comme les accessoires, par exemple. Imaginons que notre bouton reçoive un accessoire appelé actif, et nous voulons changer la couleur du bouton en fonction des accessoires. Voici comment procéder:
const StyledButton = styled.button`
largeur: 120 px;
hauteur: 42px;
fond: $ {props => props.active? "# FE0000": "# FE2012};
couleur: #FFFFFF;
"
En utilisant CSS-in-JS dans vos applications, vous bénéficiez d'un grand avantage. Vous n'aurez pas à gérer une maintenance pénible dans votre application, il est plus facile d'organiser votre code car vous pouvez organiser tous vos styles par composants ou conteneurs, et vous pouvez utiliser le rendu conditionnel très facilement (si vous utilisez une bibliothèque comme Styled
Bibliothèques
CSS-in-JS dans les applications React en particulier est le moyen le plus utilisé pour styliser vos applications, et, bien sûr, il a un beaucoup de bibliothèques pour faire ce travail. Voici une liste des trois principales bibliothèques CSS-in-JS et de leurs fonctionnalités.
Components Composants stylisés
La bibliothèque CSS-in-JS la plus célèbre et utilisée est Composants stylisés . Nous en avons couvert un peu dans cet article, mais il vaut la peine de mentionner à nouveau qu'il a de belles fonctionnalités. Lorsque nous mentionnons CSS-in-JS, la première chose qui vient à l'esprit pour de nombreux développeurs est les composants stylisés. C'est parce que presque tous les développeurs qui ont travaillé avec React récemment ont travaillé avec des composants stylés à un moment donné. C'est un moyen puissant de définir des styles en utilisant la fonctionnalité ES6 appelée littéraux de modèle et l'idée d'utiliser des composants comme style de bas niveau aide beaucoup lorsque nous stylifions nos applications.
le bouton utilisant le composant stylisé ressemblerait à ceci:
import React from "react";
importation stylisée à partir de "composants stylisés";
const ButtonStyled = styled.button`
largeur: 120 px;
hauteur: 40px;
fond: # FE0000;
couleur: #FFFFFF;
"
const Button = (accessoires) => (
Mon bouton de composant de style
);
bouton d'exportation par défaut;
Très simple et puissant! Les composants stylisés ont de nombreuses autres fonctionnalités, telles que le rendu côté serveur, le thème, les références, les objets de style et les utilitaires de test. Si vous allez créer une application complexe qui nécessitera beaucoup de CSS, je vous recommande vraiment d'utiliser des composants stylés.
?? Emotion
Si vous venez d'une application de modules CSS et n'ayant jamais travaillé avec CSS-in-JS dans les applications React, la bibliothèque qui peut être plus simple et plus puissante à démarrer est Emotion . L'idée d'Emotion est d'avoir la syntaxe aussi proche de CSS que possible. De cette façon, les débutants n'auront pas de difficulté avec cela, et cela rend l'adoption beaucoup plus facile. Cette bibliothèque possède de nombreuses fonctionnalités avancées, telles que les cartes sources, le fournisseur de cache, les utilitaires de test tels que les tests d'instantanés et les étiquettes, et un autre point intéressant à mentionner ici est qu'Emotion est indépendant du cadre.
Si vous prévoyez de utilisez Emotion avec React, vous devrez avoir installé le paquet @ emotion / core.
yarn add @ emotion / core
Un composant de bouton simple, de style Emotion, ressemblerait à ceci:
import {css, jsx} de '@ emotion / core'
const color = 'white'
rendre(
)
Radium
Un peu différent des deux premières bibliothèques ci-dessus, Radium adopte une approche différente pour gérer les CSS. Au lieu de générer un nom de classe unique pour chaque composant, il ajoute des styles en ligne directement au HTML, de sorte que chaque élément de votre application qui utilise Radium sera directement stylisé avec l'attribut global style . Un point ici que nous devons mentionner est le suivant: le radium ne peut être utilisé que dans les applications React, ce n'est pas indépendant du cadre.
Un simple élément bouton utilisant Radium ressemblerait à ceci:
importation React à partir de "réagir";
importer du radium à partir du "radium";
const styles = {
base: {
largeur: 120 px,
hauteur: 40px
},
avertissement: {
fond: "# FFB200"
},
Succès: {
arrière-plan: "# 169EFF"
}
};
const Button = ({kind}) => (
);
// Vous devez envelopper votre composant avec Radium.
exporter le Radium (bouton) par défaut;
C'est l'une des trois bibliothèques les plus utilisées dans les applications React, mais, bien sûr, nous avons beaucoup d'autres bibliothèques, comme Aphrodite JSS et Styletron . Le but ici est de vous montrer comment CSS-in-JS peut bénéficier à votre développement et améliorer votre application, en ayant du code CSS plus concis, mieux écrit et réutilisable dans toute votre application. En utilisant CSS-in-JS, vous n'aurez pas beaucoup de problèmes que nous avions avec les modules CSS, comme le code mort, les conflits globaux entre les classes, la minification, etc.
Conclusion
Dans cet article , nous avons couvert de nombreux sujets, à commencer par CSS en général. Nous avons appris comment nous traitions les styles dans nos applications avant l'essor de CSS-in-JS, nous avons appris un peu comment utiliser les modules CSS pour styliser nos éléments, puis nous avons appris à propos de CSS-in-JS. CSS-in-JS, comme nous l'avons vu dans cet article, est le moyen le plus utilisé et le plus simple et le plus concis pour gérer le CSS dans les applications React, vous permettant de créer des composants réutilisables et d'avoir une meilleure composition de code dans toute votre application. Nous avons également découvert trois principales bibliothèques CSS-in-JS qui sont largement utilisées de nos jours et leurs avantages.
Source link