Plus de 97% des sites web emploient des CSS pour leur mise en forme, le saviez-vous ?
Les feuilles de style en cascade (CSS) permettent aux développeurs web de concevoir des pages web esthétiques, faciles à explorer et bien présentées.
Le langage CSS précise comment les documents doivent apparaître à l’utilisateur. Un document, dans ce contexte, est un fichier codé dans un langage de balisage comme XML ou HTML.
Le stylage dans React, qu’est-ce que c’est ?
La facilité avec laquelle on peut créer, exécuter et maintenir une application React explique en grande partie sa popularité. React est une bibliothèque JavaScript, et non un framework, proposant bien plus que des fonctions pré-écrites ou des extraits de code.
Parmi les nombreuses raisons qui font de React l’une des bibliothèques et frameworks JavaScript les plus appréciés, on peut citer la disponibilité de composants réutilisables, sa flexibilité, la stabilité du code, sa rapidité et ses performances.
Dans React, le stylage consiste à créer des composants visuellement attractifs à l’aide de CSS. Il est cependant important de noter que React utilise JSX (mélange de JavaScript et XML) comme langage de balisage, et non HTML. L’une des différences principales est que HTML utilise « .class » pour identifier les classes, tandis que JSX utilise « .ClassName ».
Pourquoi utiliser CSS pour styliser React ?
- Rendre votre application réactive : Les applications web d’aujourd’hui doivent être accessibles aussi bien sur les petits que les grands écrans. Le CSS vous permet d’appliquer des requêtes média pour que votre application React s’adapte à différentes tailles d’écran.
- Accélérer le développement : Une même règle CSS peut être appliquée à plusieurs composants de votre application React.
- Faciliter la maintenance : Il est aisé de modifier l’apparence de composants ou parties spécifiques de votre application grâce au CSS.
- Améliorer l’expérience utilisateur : Le CSS permet un formatage intuitif. Une application React avec un texte et des boutons placés logiquement est plus facile à parcourir et à utiliser.
Plusieurs approches sont à la disposition des développeurs pour styliser leurs applications React. Voici quelques-unes des plus courantes :
Styles en ligne
L’approche des styles en ligne est la plus simple pour styliser une application React. Elle évite la création d’une feuille de style externe. Le code CSS est directement ajouté dans le code React.
Il est à noter que les styles en ligne ont une priorité élevée sur les autres styles. Ainsi, un style en ligne remplacera toute mise en forme issue d’une feuille de style externe.
Voici un exemple de style en ligne dans une application React :
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Cet exemple affichera un titre h1 avec un fond bleu clair.
Avantages des styles en ligne
- Rapidité : C’est l’approche la plus simple, car vous ajoutez le style directement à la balise que vous souhaitez styliser.
- Priorité élevée : Les styles en ligne ont la priorité sur les feuilles de style externes. Vous pouvez donc l’utiliser pour modifier un élément précis sans impacter le reste de l’application.
- Idéal pour le prototypage : Vous pouvez utiliser les styles en ligne pour tester une fonctionnalité avant d’intégrer la mise en forme dans une feuille de style externe.
Inconvénients des styles en ligne
- Fastidieux : Styliser chaque balise directement est chronophage.
- Limité : Vous ne pouvez pas utiliser les fonctionnalités CSS avancées telles que les sélecteurs et les animations avec les styles en ligne.
- Code illisible : L’usage excessif de styles en ligne rend le code JSX difficile à lire.
Importer des feuilles de style externes
Vous pouvez écrire du CSS dans un fichier externe et l’importer dans votre application React. Cette méthode est similaire à l’importation d’un fichier CSS dans la balise <head> d’un document HTML.
Pour cela, il faut créer un fichier CSS dans le répertoire de votre application, l’importer dans le composant souhaité et définir les règles de style pour votre application.
Pour illustrer le fonctionnement des feuilles de style externes, vous pouvez créer un fichier CSS nommé « App.css » et l’importer de la manière suivante :
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
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 « Composants ».
Avantages des feuilles de style CSS externes
- Réutilisabilité : Vous pouvez utiliser les mêmes règles CSS dans différents composants d’une application React.
- Code plus clair : L’utilisation de feuilles de style externes rend le code plus facile à comprendre.
- Fonctionnalités CSS avancées : Vous pouvez utiliser des pseudo-classes et des sélecteurs avancés.
Inconvénient des feuilles de style CSS externes
- Nécessité de conventions de nommage : Il faut mettre en place une convention de nommage rigoureuse pour éviter que les styles ne se chevauchent.
Utiliser les modules CSS
Les applications React peuvent devenir très grandes. Par défaut, les noms de classe et les noms d’animation CSS ont une portée globale. Cela peut poser problème avec des feuilles de style volumineuses, car un style peut en écraser un autre.
Les modules CSS résolvent ce problème en localisant la portée des noms de classe et d’animation. Ainsi, un nom de classe ne sera accessible que dans le fichier ou composant où il est défini. Chaque nom de classe reçoit un nom de programmation unique, éliminant ainsi les conflits.
Pour implémenter les modules CSS, créez un fichier avec l’extension « .module.css ». Par exemple, si vous nommez votre feuille de style « style », le nom du fichier sera « style.module.css ».
Importez ensuite le fichier dans votre composant React, et vous êtes 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 fichier App.js comme ceci :
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello toptips.fr reader</h1>
);
}
export default App;
Avantages des modules CSS
- Intégration aisée avec SCSS et CSS
- Évite les conflits de noms de classe
Inconvénients des modules CSS
- Références complexes : Les débutants peuvent trouver déroutant de référencer des noms de classe avec des modules CSS.
Utiliser les composants stylisés
Les composants stylisés permettent aux développeurs de créer des composants avec du CSS directement dans le code JavaScript. Un composant stylisé est un composant React avec des styles intégrés. Ils offrent un stylage dynamique et des noms de classe uniques.
Pour commencer à utiliser les composants stylisés, installez le paquet dans le dossier racine de votre projet avec cette commande :
npm install styled-components
La prochaine étape est d’importer les composants stylisés dans votre application React.
Voici un extrait de code d’App.js utilisant des composants stylisés :
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
L’application rendue aura les styles ci-dessus importés depuis les composants stylisés.
Avantages des composants stylisés
- Prévisibilité : Les styles sont regroupés au sein de composants individuels.
- Pas de conventions de nommage : Vous n’avez pas à vous soucier des conventions de nommage de vos classes. Écrivez simplement vos styles, et le paquet s’occupe du reste.
- Exportation en tant que props : Les composants stylisés transforment le CSS normal en composants React. Vous pouvez ainsi réutiliser ce code, étendre les styles via des props, et l’exporter.
Inconvénients des composants stylisés
- Bibliothèque tierce : Nécessite l’installation d’une bibliothèque tierce.
Feuilles de style syntaxiquement impressionnantes (SASS/SCSS)
SASS propose des outils et fonctionnalités plus puissantes que le CSS standard. On peut écrire des styles de deux manières différentes, via les extensions .scss et .sass.
La syntaxe de SASS est proche de celle du CSS classique. Cependant, il n’est pas nécessaire d’utiliser les accolades ouvrantes et fermantes lors de la rédaction des règles de style en SASS.
Un exemple simple de code SASS pourrait ressembler à ceci :
nav
ul
margin-right: 20px
padding: 0
list-style: list
li
display: block
a
display: block
padding: 6px 12px
text-decoration: underline
nav
Pour utiliser SASS dans votre application React, vous devez d’abord compiler SASS en CSS simple. Après avoir initialisé votre application avec la commande Create React App, installez node-sass pour gérer la compilation.
npm install node-sass
Vous pouvez ensuite créer vos fichiers avec les extensions « .scss » ou « .sass » et les importer de manière habituelle. Par exemple :
import "./Components/App.sass";
Avantages de SASS/SCSS
- Fonctionnalités dynamiques : Offre de nombreuses fonctionnalités dynamiques comme les mixins, l’imbrication et l’héritage.
- Syntaxe allégée : Moins de boilerplate pour écrire du code CSS.
Inconvénients de SASS/SCSS
- Styles globaux : Les styles étant globaux, cela peut entraîner des conflits importants.
Quelle est la meilleure approche de style ?
Maintenant que nous avons exploré cinq approches différentes, vous vous demandez certainement laquelle est la meilleure. Il est difficile de désigner un grand gagnant, mais ces éléments peuvent vous aider à prendre une décision éclairée :
- Les indicateurs de performance
- La nécessité d’un système de conception
- La facilité d’optimisation du code
Les styles en ligne sont adaptés aux petites applications simples avec peu de code. Les autres approches (external, SASS, Styled Components et CSS Modules) sont plus adaptées aux applications de grande taille.
Comment maintenir son CSS dans une grande application React ?
- Éviter les styles en ligne : Écrire des styles CSS en ligne pour chaque balise dans une grande application React est fastidieux. Préférez une feuille de style externe adaptée.
- Linters CSS : Utilisez des linters comme Stylelint pour identifier rapidement les erreurs de style.
- Revue de code régulière : La revue de code permet de détecter les bugs au plus tôt.
- Automatisation des tests : Automatisez les tests de votre code CSS avec des outils comme Enzyme et Jest.
- Code DRY : Pour les styles fréquemment utilisés (couleurs, marges…), utilisez des variables et des classes utilitaires en respectant le principe DRY (Don’t Repeat Yourself).
- Conventions de nommage : Utilisez des conventions de nommage comme BEM (Block Element Modifier) pour faciliter la compréhension et la réutilisation des classes CSS.
Conclusion
Nous avons exploré différentes manières de styliser une application React. Le choix de l’approche dépendra de vos besoins, de vos compétences et de vos préférences. Il est possible de combiner plusieurs approches, comme les styles en ligne et les feuilles de style externes.
N’hésitez pas à explorer les meilleurs frameworks et bibliothèques CSS pour le développement front-end.