Fermer

octobre 17, 2019

8 façons de styliser les composants React comparés –


Dans mon bureau, je travaille avec quelques développeurs sur des projets React JS, qui possèdent divers niveaux d’expérience React JS. Nous avons résolu des problèmes délirants tels que comme traiter de manière étrange l’initialisation de l’état par Redux et en faisant fonctionner une requête axios avec PHP et en comprenant ce qui se passe à l’arrière-plan . Cet article découle d'une question sur le style des composants React.

Les différentes approches de style

Il existe différentes manières de styler les composants React. Choisir la bonne méthode pour styliser les composants n’est pas un absolu parfait. C’est une décision spécifique qui devrait servir votre cas d’utilisation, vos préférences personnelles et, surtout, vos objectifs architecturaux. Par exemple, je me sers des notifications de React JS en utilisant Noty et le style devrait également pouvoir prendre en charge les plugins.

Certains de mes objectifs en réponse à la question incluaient:

  • Global namespacing
  • Dépendances
  • Réutilisabilité
  • Évolutivité
  • Élimination des codes morts

Il semble exister environ huit façons différentes de nommer les composants React JS largement utilisés dans l'industrie pour le travail au niveau de la production:

  • CSS
  • CSS normal
  • CSS dans JS
  • Composants stylisés
  • Modules CSS
  • Sass & SCSS
  • Less
  • Stylable

Pour chaque méthode, je vais examiner la nécessité pour les dépendances, le niveau de difficulté, et si l'approche est vraiment bonne ou non.

Inline CSS

  • Dépendances: Aucune
  • Difficulté: Facile
  • Approche: Pire

Je ne pense pas que quiconque ait besoin d'une introduction sur CSS en ligne. Il s’agit du style CSS envoyé à l’élément directement via HTML ou JSX. Vous pouvez inclure un objet JavaScript pour CSS dans les composants React. Il existe quelques restrictions, comme le remplacement de chaque - par un texte camelCase. Vous pouvez les styler de deux manières différentes en utilisant des objets JavaScript, comme indiqué dans l'exemple.

Exemple

 import React from "react";

const spanStyles = {
  couleur: "#fff",
  borderColor: "# 00f"
};

const Button = props => (
  
);

Regular CSS

  • Dépendances: Aucune
  • Difficulté: Facile

    Facile

  • Facile [1965910] , sans doute un pas mieux que le CSS en ligne. Les styles peuvent être importés dans un nombre illimité de pages et d'éléments, contrairement au CSS en ligne, qui s'applique directement à l'élément en question. CSS normal présente plusieurs avantages, tels que la réduction de la taille du fichier avec une structure de code vierge.

    Vous pouvez gérer autant de feuilles de style que vous le souhaitez, et il est également plus facile de modifier ou de personnaliser les styles en fonction de vos besoins. Cependant, les CSS classiques peuvent poser un problème majeur si vous travaillez sur un projet plus volumineux impliquant beaucoup de personnes, en particulier sans modèle convenu pour le style en CSS.

    Example

     a: link {{no}}
  couleur: gris;
}
a: visité {
  la couleur verte;
}
a: survoler {
  couleur: rebeccapurple;
}
a: actif {
  couleur sarcelle;
}

    Plus d’informations

    Pour en savoir plus sur l’utilisation régulière par les CSS de la page Learning CSS du W3C. Il existe de nombreux terrains de jeux comme JS Bin – Débogage JavaScript collaboratif JSFiddle CodePen: Construire, tester et découvrir du code frontal Repl. it – La principale plate-forme de codage en ligne au monde etc. où vous pouvez les essayer en direct et obtenir les résultats en temps réel.

    CSS dans JS

    • Dépendances: jss jss-preset-default jss-cli
    • Difficulté: Facile
    • Approche: Décent de

    déc. in JS est un outil de création pour CSS qui vous permet d’utiliser JavaScript pour décrire les styles de manière déclarative, sans conflit et réutilisable. Il peut être compilé dans le navigateur, côté serveur ou au moment de la construction dans Node. Il utilise JavaScript comme langage pour décrire les styles de manière déclarative et maintenable. C’est un compilateur hautes performances de JS à CSS qui fonctionne à l’exécution et sur le serveur. Lorsque vous réfléchissez aux composants, vous n'avez plus besoin de gérer de nombreuses feuilles de style. CSS-in-JS abstrait le modèle CSS au niveau du composant, plutôt qu'au niveau du document (modularité).

    Exemple

     import Réagissez à partir de "react";
importer injectSheet de "react-jss";

// Crée tes styles. Rappelez-vous, puisque React-JSS utilise le préréglage par défaut,
// la plupart des plugins sont disponibles sans nécessiter de configuration supplémentaire.
styles const =
  myButton: {
    la couleur verte",
    marge: {
      // jss-expand donne une syntaxe plus lisible
      top: 5, // jss-default-unit rend cette 5px
      à droite: 0,
      en bas: 0,
      à gauche: "1rem"
    },
    "& envergure": {
      // jss-nested applique ceci à un span enfant
      fontWeight: "bold" // jss-camel-case transforme cela en "font-weight"
    }
  },
  myLabel: {
    fontStyle: "italic"
  }
};

const Button = ({classes, enfants}) => (
  
);

// Enfin, injectez la feuille de style dans le composant.
const StyledButton = injectSheet (styles) (Button);

    Plus d'informations

    Vous pouvez en apprendre davantage sur cette approche dans la documentation officielle de JSS . Il existe également un moyen d'essayer en utilisant leur REPL (Read-eval-print Loop).

    Composants stylisés

    • Dépendances: de composants stylés
    • ] Difficulté: Moyenne
    • Approche: Décente

    Styled-components est un exemple de CSS mentionné ci-dessus dans JS. Il nous donne fondamentalement CSS avec d'autres propriétés que vous souhaiteriez avoir en CSS, comme imbrication. Cela nous permet également de styler le CSS sous la variable créée en JavaScript. Vous pouvez normalement créer un composant React avec les styles qui y sont attachés sans avoir à créer un fichier séparé pour CSS. Styled-components nous permet de créer des composants personnalisés réutilisables qui peuvent être moins fastidieux à gérer. Les accessoires peuvent être utilisés dans le style des composants de la même manière que dans les composants React. Les accessoires sont utilisés à la place des classes en CSS et définissent les propriétés de manière dynamique.

    Exemple

     import React from "react";
importer styled, {css} de "styled-components";

const Button = styled.button`
  curseur: pointeur;
  fond: transparent;
  taille de police: 16px;
  border-radius: 3px;
  couleur: palevioletred;
  marge: 0 1em;
  rembourrage: 0,25em 1em;
  transition: 0.5s tout relâchement;
  $ {props =>
    props.primary &&
    css`
      couleur de fond: blanc;
      la couleur verte;
      couleur de bordure: vert;
    `};
`;

bouton d'exportation par défaut;

    Plus d'informations

    Styled-components dispose d'une documentation détaillée et le site propose également un éditeur actif permettant d'essayer le code. Obtenez de plus amples informations sur les composants stylés dans styled-components: Basics .

    Modules CSS

    • Dépendances: css-loader
    • Difficulté: Tough (Utilise Loader Configuration)
    • Approche: Mieux

    Si vous avez déjà eu le sentiment que le problème de la portée globale des CSS prend plus de temps lorsque vous devez trouver quel style particulier fait, ou si vous avez dû écrire un fichier CSS sans l’organiser correctement pour que le code fonctionne d’abord, ou si le fait de vous en débarrasser vous donne un léger coup de pouce en vous demandant si vous pourriez casser tout le code, je pense toi. Les modules CSS s'assurent que tous les styles d'un composant sont regroupés à un seul endroit et s'appliquent à ce composant particulier. Cela résout certainement le problème de portée globale du CSS. La fonctionnalité de composition agit comme une arme pour représenter les styles partagés entre les états. C’est similaire au mixin de Sass, ce qui permet de combiner plusieurs groupes de styles.

    Exemple

     import React from from "react";
importer le style de "./panel.css";

const Panel = () => (
  
    
    
     Un panneau de base 
    
  
    
);

panneau d'exportation par défaut;

     .panelDefault {
  border-color: #ddd;
}
.panelBody {
  rembourrage: 15px;
}

    Sass & SCSS

    • Dépendances: node-sass
    • Difficulté: Facile
    • Approche: La meilleure Sass affirme qu'il s'agit du langage d'extension CSS de niveau professionnel le plus mature, le plus stable et le plus puissant au monde. Il s’agit d’un préprocesseur CSS, qui ajoute des fonctionnalités spéciales, telles que des variables, des règles imbriquées et des mixins (parfois appelées «sucre syntaxique») dans les CSS classiques. L'objectif est de rendre le processus de codage plus simple et plus efficace. Tout comme les autres langages de programmation, Sass permet l'utilisation de variables, imbrication, partiels, importations et fonctions, qui ajoutent des super pouvoirs au CSS standard.

      Exemple

       $ font-stack: 'Open Sans', sans-serif;
$ couleur primaire: # 333;

corps {
  fonte: 100% $ font-stack;
  couleur: $ primaire-couleur;
}

      Pour en savoir plus

      Pour en savoir plus sur l'utilisation et l'installation de Sass avec divers langages de programmation, reportez-vous à la documentation officielle de ce dernier à l'adresse Sass: Des feuilles de style syntaxiquement impressionnantes . Si vous voulez essayer quelque chose, il existe un service appelé SassMeister – Le terrain de jeu Sass où vous pouvez jouer avec différentes fonctionnalités de Sass et SCSS.

      Less

      • Les dépendances: moins less-loader
      • Difficulté: Facile
      • Approche: Bon Moins (19659010] Moins (Leaner Style Sheets) est langage de feuille de style de préprocesseur dynamique à code source ouvert, pouvant être compilé en CSS et exécuté du côté client ou du côté serveur. Il s’inspire à la fois de CSS et de Sass et ressemble au SCSS. Quelques différences notables incluent les variables commençant par un signe @ en Less et par un $ en Sass.

        Example

         @ pale-green-color: # 4D926F;

#entête {
  couleur: @ vert pâle;
}
h2 {
  couleur: @ vert pâle;
}

        Plus d'informations

        Vous pouvez démarrer avec Less dans la documentation officielle, et il y a LESSTESTER, un Less Sandbox qui convertit votre code Less en CSS.

        Stylable

        • Dépendances: @ stylable / core @ stylable / runtime @ stylable / optimiseur @ stylable / module-utils , @ stylable / custom-valu
        • Difficulté: Difficile
        • Approche: Mieux

        Stylable est une autre jointure pré-processeur Sass, SCSS et Less. Si vous avez de la difficulté à vous familiariser avec les composants stylés – car leur syntaxe est légèrement différente de celle du CSS normal – vous en profiterez. Stylable ressemble à CSS, mais offre plus d’opportunités pour rendre chaque composant discret. Cela peut faire ce que les modules CSS trouvent plus difficile à faire, à savoir le style des parties internes d'une interface utilisateur. En plus des autres propriétés de CSS, Stylable propose également des pseudo-classes et des pseudo-éléments personnalisés. Cette propriété de Stylable nous permet automatiquement de créer des classes CSS personnalisées, ce qui nous permet de styliser les parties internes des composants.

        Exemple

         @namespace "Page";
: import {
    -st-from: './video-player.st.css';
    -st-default: VideoPlayer;
}
.mainVideo {
    -st-extend: VideoPlayer; / * Définir mainVideo comme VideoPlayer * /
}
.mainVideo :: playButton {/ * écrasement mainVideo playButton * /
    fond: vert;
    couleur violet;
}

         / * Sortie CSS * /
.Page__mainVideo.VideoPlayer__root {}
.Page__mainVideo.VideoPlayer__root .VideoPlayer__playButton {
    fond: vert;
    couleur violet;
}

        Plus d'informations

        Stylable a beaucoup plus à offrir. La documentation officielle sur la mise en route de fournit une explication détaillée. Une documentation distincte sur React integration permet d’intégrer manuellement Stylable à un composant React

        En se salissant les mains

        Avec autant d’options disponibles, je me suis sali les mains et je les ai essayées une par une. Grâce à Git, j'ai pu contrôler les versions et tout comparer pour voir quelle option était gagnante. J'ai pu obtenir des précisions sur le nombre de dépendances que j'utilisais et sur le déroulement de mon flux de travail lorsque je travaillais avec des styles complexes. J'ai eu un peu de mal avec tout ce qui ne correspond pas aux CSS, modules CSS et SCSS habituels.

        Les modules CSS Office Work

        facilitent les importations et autres choses, mais lorsque j'ai essayé de les utiliser, la prise en charge était insuffisante. en l'étendant. Les modules CSS avaient des problèmes lorsque j'utilisais plusieurs classes et hiérarchies CSS. La seule bonne chose à ce sujet est que vous n’obtenez aucun conflit CSS, mais l’inconvénient est que votre code CSS est extrêmement volumineux. C’est un peu la méthodologie BEM.

        A cela s’ajoute que traiter des pseudo-éléments et des états était un enfer. Parfois, les modules CSS ne sont même pas compilés lorsque j'essaie d'importer le contenu d'une autre classe à partir d'un autre fichier. Je préférerais utiliser des mixins dans SCSS pour cela, mais malheureusement, les modules CSS restent très basiques dans ce domaine. Le mot-clé compose ici ne fonctionne presque jamais pour moi. C'est un gros inconvénient auquel j'ai personnellement fait face. C’est peut-être tout à fait de ma faute si je ne l’utilisais pas correctement, mais cela n’a pas fonctionné, même pour un cas authentique.

        Personal Project

        J’ai utilisé SCSS comme prochaine tentative de travailler avec des styles pour React. Heureusement, cela a fonctionné. La comparaison de SCSS avec les modules CSS m'a permis de mieux comprendre. Il y a tellement de choses communes entre eux. Le problème ici est que j'ai déjà utilisé SCSS et que je suis très à l'aise avec ce logiciel car il est similaire au CSS, mais avec des super-pouvoirs. La seule chose que je dois faire avec Create React App est que je dois simplement installer une dépendance supplémentaire, node-sass et rien d'autre. Pas de modifications de configuration de pack Web ni d'éjection de l'application React JS de CRA.

        En examinant la puissance des modules CSS, j'ai effectué une comparaison superficielle entre les modules SCSS et CSS et constaté que la plupart des fonctionnalités que je possède sont dans SCSS. En ce qui concerne la composition, qui est la raison principale pour laquelle mon équipe a choisi les modules CSS, nous pouvons utiliser @mixin et @include dans SCSS et ils fonctionnent très bien. Je n’ai jamais vu de modules CSS interagir avec JavaScript, c’est donc pareil avec SCSS – aucune interaction avec la partie JavaScript. Le bouclage et les inclusions avec des fonctions sont propres à SCSS, alors j’ai pensé à utiliser SCSS pour mon projet personnel et un nouveau projet dans mon bureau.

        Le puissant?

        De toute évidence, SCSS est le vainqueur absolu ici. SCSS fournit beaucoup de nouvelles fonctionnalités prêtes à l'emploi par rapport aux modules CSS. Je vais faire une analyse approfondie du SCSS, en expliquant comment il est préférable et pourquoi vous devriez utiliser le SCSS dans votre prochain projet.

        SCSS Wins: Analyse approfondie

        J'adore le SCSS en raison de ses fonctionnalités . La première chose à faire est qu’il est extrêmement similaire au CSS. Vous n'avez pas besoin d'apprendre quelque chose de nouveau pour comprendre le SCSS. Si vous connaissez le CSS, vous connaissez probablement Sass. Sass est livré avec deux syntaxes différentes: Sass lui-même et SCSS, qui est utilisé plus souvent. La syntaxe SCSS est compatible CSS, il vous suffit donc de renommer votre fichier .css en .scss . Bien entendu, vous n’utilisez pas les super pouvoirs ni les capacités offertes par Sass, mais au moins vous vous rendez compte que vous n’avez pas besoin de passer des heures et des heures pour commencer à utiliser Sass. À partir de là, vous pourrez apprendre la syntaxe Sass au fur et à mesure.

        Vous pouvez vous diriger vers Sass Basics pour vous familiariser avec les bases. Configurer le support Sass pour votre projet et commencer à styliser en utilisant SCSS est simple dans le cas de React. Le prochain avantage de l'utilisation de SCSS, comme de tout pré-processeur CSS, est la possibilité d'utiliser des variables. Une variable vous permet de stocker une valeur ou un ensemble de valeurs et de réutiliser ces variables dans vos fichiers Sass autant de fois que vous le souhaitez et où vous le souhaitez. Facile, puissant et utile. Cela vous aide à thématiser votre produit ou votre application et à le styler selon les besoins du client, sans autre chose que de changer quelques bits de code, ici et là.

        L'imbrication dans CSS (ou SCSS) est l'une des meilleures choses. que Sass peut offrir. Sass vous permet d'utiliser une syntaxe imbriquée, qui est un code contenu dans un autre élément de code remplissant une fonction plus large. Dans Sass, l’imbrication permet de cibler les éléments de manière plus propre. En d'autres termes, vous pouvez imbriquer vos éléments HTML à l'aide de sélecteurs CSS . L'imbrication du code dans Sass présente de nombreux avantages, le principal étant la facilité de maintenance et la lisibilité du SCSS. Nous avons tous entendu parler du concept DRY dans le code, mais en CSS, cela évite d'avoir à réécrire les sélecteurs plusieurs fois. Cela facilite également la maintenance du code.

        La possibilité d'utiliser des partiels est excellente. Vous pouvez scinder le SCSS n'importe où en partiels et les inclure où vous le souhaitez. Vous pouvez également les diviser en mixins et transmettre certains paramètres pour fournir un CSS différent. Utiliser des variables c'est bien, mais que se passe-t-il si vous avez des blocs de code répétés dans votre feuille de style? C'est à ce moment que les mixins entrent en jeu. Les mixins sont comme des fonctions dans d'autres langages de programmation. Ils renvoient une valeur ou un ensemble de valeurs et peuvent prendre des paramètres, y compris des valeurs par défaut. Notez que Sass a aussi des fonctions, ne confondez donc pas mixin avec une fonction.

        Utilisation de SCSS avec React JS

        La version améliorée de Create React publiée récemment nous a apporté de nombreux nouveaux outils. jouer avec. Sass en est un que je suis ravi d'avoir intégré, car nous avions auparavant des fichiers .scss compilés et écrits dans des fichiers .css directement dans notre dossier. structure. Vous pouvez être préoccupé par l'utilisation de Sass dans React. N’est-ce pas une façon plus intelligente d’écrire des styles avec des bibliothèques CSS-in-JS telles que styled-components ou aphrodite ? Je pense que l'ajout du support Sass à l'application Create React sera d'une grande aide pour les débutants de React. Comment utiliser Sass dans React est l’une des questions que me posent toujours les personnes qui se lancent dans React. Avec les ajouts de React 16.6 tels que React.memo () et les ajouts fonctionnels de React 16.7 tels que les crochets, commencer par React sera plus facile que jamais!

        1. Installez l'application de démarrage à l'aide de l'application Créer React [19659004] Commençons par installer l'application de démarrage. Vous pouvez le faire en exécutant npm install -g create-react-app globalement ou en utilisant npx create-react-app pour l'installer et l'appeler immédiatement afin que votre package installé ne soit pas n'importe où dans vos globals. Pour en savoir plus sur npx .

        2. Installez node-sass dépendance

          Lançons npm installons node-sass pour installer node-sass pour vous aider. compiler votre scss à css .

        3. C’est fini, nous avons terminé. Nous pouvons tester la configuration en remplaçant notre fichier index.css par le fichier index.scss et en essayant quelques fonctionnalités intéressantes Sass / SCSS .

        Exemples courants

        Voici une façon d'utiliser les variables dans SCSS:

         $ blue: # 004BB4;
$ ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
$ nunito-font: 'Nunito', 'Arial', 'Helvetica', sans serif;

        Une fois les variables créées, vous pouvez les utiliser où vous le souhaitez, comme ceci:

         h1 {
  font: $ ubuntu-font;
  couleur: $ bleu;
}
une {
  police: $ nunito-font;
  couleur de fond: $ blue;
  rembourrage: 6px;
}

        Lorsque vous compilez vos fichiers SCSS, le compilateur Sass prend en charge les variables que vous avez utilisées dans votre fichier source, en remplaçant le nom de la variable par sa valeur stockée. Et changer la valeur de la couleur est aussi rapide que de mettre à jour le contenu variable et de recompiler. L'époque où vous utilisiez “Rechercher et remplacer” dans votre éditeur de texte favori pour modifier les couleurs de votre fichier CSS est révolue.

        Une fonctionnalité intéressante que j'ai déjà abordée est la fonctionnalité “d'imbrication” de SCSS. Un exemple de cela peut être démontré ici:

        Cependant, sachez que nidifier trop profondément n'est pas une bonne pratique. Plus votre imbrication est profonde, plus le fichier Sass devient détaillé et plus le CSS compilé sera potentiellement volumineux, car l'imbrication est aplatie lors de la compilation. Ainsi, une surutilisation de l'imbrication peut créer des règles CSS trop spécifiques et difficiles à maintenir. Il est possible que les sélecteurs ne puissent pas être réutilisés, et il existe également des problèmes de performances. Les sélecteurs imbriqués créeront une longue chaîne de sélection CSS qui générera un fichier CSS plus volumineux.

        Wrapping Up

        Les pré-processeurs CSS sont là pour rester. Ils étendent les fonctionnalités CSS de base en vous fournissant un ensemble de fonctionnalités puissantes qui augmenteront immédiatement votre productivité. Nous avons mentionné quelques avantages, mais il en existe bien d'autres, tels que héritage, fonctions, directives de contrôle et expressions telles que if () pour () ou while () types de données, interpolation, etc. Devenir un gourou Sass peut prendre un peu de temps – tout ce que vous avez à faire est de regarder dans les fichiers Bootstrap Sass pour voir comment Sass pourrait se transformer en chose complexe. Mais apprendre les bases et le configurer pour votre projet ne vous prendra pas longtemps.

        Essayez ceci et laissez-moi savoir si vous avez besoin d’aide pour l’installer. Je ne suis qu'un message.


        Praveen Kumar

        Praveen est développeur de logiciels et de sites Web, consultant en cloud computing, développeur de logiciels complets, développeur, concepteur UX, architecte UX, et même… cuisinier. Vous pouvez le trouver à l'adresse praveen.science .

Le meilleur outil 2023 pour ta croissance Instagram !



Source link