Saviez-vous que plus de 97 % des sites web utilisent les feuilles de style en cascade (CSS) ?

Les feuilles de style en cascade ( CSS) permettent aux développeurs de créer des pages web attrayantes, faciles à lire et à présenter.

Le langage CSS spécifie la manière dont les documents sont présentés à l’utilisateur. Un document, dans ce cas, est un fichier écrit dans un langage de balisage tel que XML ou HTML.

Qu’est-ce que la stylisation dans React ?

La simplicité de création, d’exécution et de maintenance d’une application React est la principale raison de sa popularité. React est une bibliothèque JavaScript plutôt qu’un framework, offrant plus que des fonctions pré-écrites et des extraits de code.

La disponibilité de composants réutilisables, sa flexibilité, la stabilité du code, la vitesse et la performance sont quelques-unes des raisons pour lesquelles React est classé parmi les frameworks et les bibliothèques JavaScript.

Le stylisme dans React est le processus qui consiste à rendre les différents composants d’une application React visuellement attrayants à l’aide de CSS. Toutefois, il convient de noter que React utilise JSX (JavaScript et XML) au lieu de HTML comme langage de balisage. L’une des principales différences est que HTML utilise .class pour étiqueter les classes, tandis que JSX utilise .ClassName pour indiquer la même chose.

Pourquoi devriez-vous styliser React à l’aide de CSS ?

Why-should-you-style-React-using-CSS
  • Pour rendre votre application réactive. Les applications web modernes doivent être accessibles à la fois sur les petits et les grands écrans. CSS vous permet d’appliquer des requêtes média à votre application React et de la rendre réactive à différentes tailles d’écran.
  • Accélérez le processus de développement. Vous pouvez utiliser la même règle CSS pour plusieurs composants de votre application React.
  • Faciliter la maintenance de l’application React. Il est facile d’apporter des modifications d’apparence à des composants/parties spécifiques de votre application à l’aide de CSS.
  • Amélioration de l’expérience utilisateur. Les feuilles de style CSS permettent un formatage convivial. Une application React dont le texte et les boutons sont placés à des endroits logiques est facile à naviguer et à utiliser.

Les développeurs peuvent utiliser plusieurs approches pour styliser leurs applications React. Voici quelques-unes des plus courantes ;

Écrire des styles en ligne

Les styles en ligne sont l’approche la plus simple pour styliser une application React, car les utilisateurs n’ont pas besoin de créer une feuille de style externe. Le style CSS est appliqué directement au code React.

Il convient de noter que les styles en ligne ont une priorité élevée sur les autres styles. Ainsi, si vous avez une feuille de style externe avec un certain formatage, elle sera remplacée par le style en ligne.

Voici une démonstration du style inline dans une application React. 

import React from 'react' ;

import ReactDOM from 'react-dom/client' ;

const Header = () => {

  return (

    <&gt

      <h1 style={{backgroundColor : "lightblue"}}>Bonjour le monde!!!!!</h1&gt

      <h2>Ajoutez un peu de style!</h2&gt

    </&gt

  ) ;

}

const root = ReactDOM.createRoot(document.getElementById('root')) ;

root.render(<Header />) ;

L’élément affiché présentera un h1 avec un arrière-plan bleu clair.

Avantages de la mise en forme en ligne

  • Rapide. C’est l’approche la plus simple, car vous ajoutez le style directement à la balise que vous souhaitez modifier.
  • Préférence importante. Les styles en ligne remplacent les feuilles de style externes. Vous pouvez donc les utiliser pour vous concentrer sur une fonctionnalité particulière sans modifier l’ensemble de l’application.
  • Génial pour le prototypage. Vous pouvez utiliser les styles en ligne pour tester les fonctionnalités avant d’incorporer la mise en forme dans une feuille de style externe.

Inconvénients de la stylisation en ligne

  • Peut être fastidieux. Le fait de styler directement chaque balise prend beaucoup de temps.
  • Limité. Vous ne pouvez pas utiliser les fonctionnalités CSS telles que les sélecteurs et les animations avec les styles en ligne.
  • Un grand nombre de styles en ligne rend le code JSX illisible.

Importation de feuilles de style externes

Vous pouvez écrire des feuilles de style CSS dans un fichier externe et les importer dans l’application React. Cette approche est comparable à l’importation d’un fichier CSS dans la balise d’un document HTML.

Pour ce faire, vous devez créer un fichier CSS dans le répertoire de votre application, l’importer dans votre composant cible et écrire des règles de style pour votre application.

Pour démontrer le fonctionnement des feuilles de style CSS externes, vous pouvez créer un fichier CSS et le nommer App.css. Vous pouvez ensuite l’exporter comme suit. 

import { React } from "react" ;

import "./Components/App.css" ;

function App() {

  return (

    <div className="main"&gt

    </div&gt

  ) ;

}

export default App ;

L’extrait de code ci-dessus importe une feuille de style externe dans le composant App.js. Le fichier App.css se trouve dans le dossier Components.

Avantages des feuilles de style CSS externes

  • Réutilisable. Vous pouvez utiliser la même règle CSS dans différents composants d’une application React.
  • Rend le code plus présentable. La compréhension du code est facilitée par l’utilisation de feuilles de style externes.
  • Permet d’accéder à des fonctionnalités CSS avancées. Vous pouvez utiliser des pseudo-classes et des sélecteurs avancés lorsque vous utilisez des feuilles de style externes.

Inconvénients des feuilles de style CSS externes

  • Nécessite une convention de dénomination fiable pour éviter que les styles ne soient remplacés.

Utilisez des modules CSS

Use-CSS-Modules

Les applications React peuvent devenir très volumineuses. Les noms d’animation et de classe CSS sont, par défaut, définis globalement. Ce paramètre peut s’avérer problématique lorsqu’il s’agit de feuilles de style volumineuses, car un style peut en remplacer un autre.

Les modules CSS résolvent ce problème en définissant localement les noms d’animation et de classe. Cette approche garantit que les noms de classe ne sont disponibles que dans le fichier/composant où ils sont nécessaires. Chaque nom de classe reçoit un nom programmatique unique, ce qui évite les conflits.

Pour mettre en œuvre les modules CSS, créez un fichier avec .module.css. Si vous souhaitez nommer votre feuille de style style, le nom du fichier sera style.module.css.

Importez le fichier créé dans votre composant React, et vous serez prêt à commencer.

Votre fichier CSS pourrait ressembler à ceci ;

/* styles.module.css */

.font {

  color : #f00 ;

  font-size : 30px ;

}

Vous pouvez importer le module CSS dans votre App.js comme suit ;

import { React } from "react" ;

importez les styles à partir de "./styles.module.css" ;

function App() {

  return (

    <h1 className={styles.heading}>Bonjour lecteur Geekflare</h1&gt

  ) ;

}

export default App ;

Avantages de l’utilisation des modules CSS

  • S’intègre facilement à SCSS et CSS
  • Évite les conflits de noms de classe

Inconvénients de l’utilisation des modules CSS

  • Le référencement des noms de classe à l’aide des modules CSS peut être déroutant pour les débutants.

Utilisez des composants stylisés

Les composants stylisés permettent aux développeurs de créer des composants à l’aide de CSS dans le code JavaScript. Un composant stylé agit comme un composant React qui est livré avec des styles. Les composants stylisés offrent un style dynamique et des noms de classe uniques.

Pour commencer à utiliser les composants stylisés, vous pouvez installer le paquet dans votre dossier racine à l’aide de cette commande ;

npm install styled-components

L’étape suivante consiste à importer les composants stylisés dans votre application React

Voici un extrait de code d’App.js qui utilise les composants stylisés ;

import { React } from "react" ;
import styled from "styled-components" ;

function App() {

  const Wrapper = styled.div`

    width : 80% ;

    hauteur : 120px ;

    couleur de fond : bleu clair ;

    affichage : bloc ;

  ` ;

  return <Wrapper /> ;

}

export default App ;

L’application rendue aura les styles ci-dessus importés des composants stylisés.

Avantages des composants stylisés

  • C’est prévisible. Dans cette approche, les styles sont imbriqués dans des composants individuels.
  • Il n’est pas nécessaire de se concentrer sur les conventions de nommage de vos classes. Il vous suffit d’écrire vos styles et le paquetage s’occupera du reste.
  • Vous pouvez exporter des composants stylisés en tant qu’accessoires. Les Styled Components convertissent les feuilles de style CSS normales en composants React. Vous pouvez donc réutiliser ce code, étendre les styles par le biais d’accessoires et exporter.

Inconvénients des composants stylisés

  • Vous devez installer une bibliothèque tierce pour commencer.

Feuilles de style syntaxiquement géniales (SASS/ SCSS)

SASS propose des outils et des fonctionnalités plus puissants que les feuilles de style CSS normales. Vous pouvez écrire des styles dans deux styles différents guidés par ces extensions : .scss et .sass.

La syntaxe de SASS est similaire à celle du CSS normal. Cependant, vous n’avez pas besoin des parenthèses ouvrantes et fermantes lorsque vous écrivez des règles de style dans SASS.

Un simple extrait de SASS se présente comme suit ;

nav

  ul

    margin-right : 20px

    padding : 0

    list-style : list

  li

    affichage : bloc

  a

    affichage : bloc

    padding : 6px 12px

    décoration du texte : souligné

nav

Pour commencer à utiliser SASS dans votre application React, vous devez d’abord compiler SASS en CSS simple. Après avoir configuré votre application via la commande Create React App, vous pouvez installer node-sass pour prendre en charge la compilation. 

npm install node-sass

Vous pouvez ensuite créer vos fichiers et leur donner une extension .scss ou .sass. Vous pouvez ensuite importer vos fichiers de la manière habituelle. Par exemple ;

importez "./Composants/App.sass" ;

Avantages de SASS/SCSS

  • SASS/SCSS est livré avec de nombreuses fonctionnalités dynamiques telles que les mixins, l’imbrication et l’extension.
  • Vous n’avez pas besoin d’un grand nombre de modèles pour écrire le code CSS lorsque vous utilisez SASS/SCSS

Les inconvénients de SASS/SCSS

  • Les styles sont globaux, et vous pouvez donc rencontrer des problèmes de surcharge.

Quelle est la meilleure approche de style ?

Which-is-the-best-styling-approach

Puisque nous avons discuté de cinq approches, vous voulez savoir laquelle est la meilleure. Il est difficile d’identifier un vainqueur absolu dans cette discussion. Toutefois, les considérations suivantes vous aideront à prendre une décision éclairée :

  • Les mesures de performance
  • Si vous avez besoin d’un système de conception
  • La facilité d’optimisation de votre code

Le style en ligne convient lorsque vous avez une application simple avec peu de lignes de code. Cependant, tous les autres : external, SASS, Styled Components et CSS Modules, conviennent aux applications de grande taille.

Quelles sont les meilleures pratiques pour maintenir le CSS dans une grande application React ?

  • Évitez le style en ligne. Écrire des styles CSS en ligne pour chaque balise dans une grande application React peut être fatigant. Utilisez plutôt une feuille de style externe qui répond à vos besoins.
  • Lintz votre code. Les linters tels que Stylelint mettent en évidence les erreurs de style dans votre code afin que vous puissiez les corriger rapidement.
  • Procédez à des révisions régulières du code. Écrire des feuilles de style CSS semble amusant, mais des révisions régulières du code permettent d’identifier facilement les bogues à un stade précoce.
  • Automatisez les tests de vos fichiers CSS. Enzyme et Jest sont des outils géniaux que vous pouvez utiliser pour automatiser les tests de votre code CSS.
  • Gardez votre code DRY. Lorsque vous traitez des styles couramment utilisés tels que les couleurs et les marges, utilisez des variables et des classes utilitaires, car cela va dans le sens du principe DRY (Don’t Repeat Yourself, ne pas se répéter).
  • Utilisez des conventions de dénomination telles que Block Element Modifier. Une telle approche facilite l’écriture de classes CSS faciles à comprendre et à réutiliser.

Conclusion

Voici quelques-unes des méthodes que vous pouvez utiliser pour styliser React. Le choix de l’approche de style dépendra de vos besoins, de vos compétences et de vos goûts. Vous pouvez même combiner plusieurs approches de style, telles que les feuilles de style inline et externes, dans votre application React.

Vous pouvez également explorer les meilleurs frameworks et bibliothèques CSS pour les développeurs frontaux.