Saviez-vous que plus de 97 % des sites Web utilisent CSS pour le style ?
Les feuilles de style en cascade, ou CSS, permettent aux développeurs de créer des pages Web attrayantes, scannables et présentables.
Le langage CSS spécifie comment 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.
Table des matières
Qu’est-ce que le style 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, sa vitesse et ses performances sont quelques-unes des raisons pour lesquelles React est classé parmi les frameworks et bibliothèques JavaScript.
Le style dans React est le processus de création de divers composants dans une application React visuellement attrayants à l’aide de CSS. Cependant, 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 les désigner.
Pourquoi devriez-vous styliser React en utilisant CSS ?
- Rendez 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 multimédias à 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 sur plusieurs composants de votre application React.
- Rendre l’application React maintenable. Il est facile d’apporter des modifications d’apparence à des composants/parties spécifiques de votre application à l’aide de CSS.
- Expérience utilisateur améliorée. CSS permet un formatage convivial. A React avec du texte et des boutons dans des endroits logiques est facile à naviguer et à utiliser.
Il existe plusieurs approches que les développeurs peuvent utiliser 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 aviez une feuille de style externe avec une certaine mise en forme, elle serait remplacée par le style en ligne.
Ceci est une démonstration du 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 />);L’élément affiché affichera un h1 avec un fond bleu clair.
Avantages du style en ligne
- Rapide. C’est l’approche la plus simple, car vous ajoutez du style directement à la balise que vous souhaitez styliser.
- A une grande préférence. Les styles en ligne remplacent les feuilles de style externes. Ainsi, vous pouvez l’utiliser pour vous concentrer sur une fonctionnalité particulière sans changer l’ensemble de l’application.
- Génial pour le prototypage. Vous pouvez utiliser des styles en ligne pour tester la fonctionnalité avant d’incorporer la mise en forme sur une feuille de style externe.
Inconvénients du style en ligne
- Peut être fastidieux. Styliser chaque balise directement prend du temps.
- Limité. Vous ne pouvez pas utiliser les fonctionnalités CSS telles que les sélecteurs et les animations avec des styles en ligne.
- De nombreux styles en ligne rendent le code JSX illisible.
Importation de feuilles de style externes
Vous pouvez écrire du CSS dans un fichier externe et l’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 rédiger des règles de style pour votre application.
Pour illustrer 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">
</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éutilisable. Vous pouvez utiliser la ou les mêmes règles CSS dans différents composants d’une application React.
- Rend le code plus présentable. Comprendre le code est facile lorsque vous utilisez des feuilles de style externes.
- Donne accès à 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.
Contre des feuilles de style CSS externes
- Nécessite une convention de dénomination fiable pour garantir que les styles ne sont pas remplacés.
Utiliser les modules CSS
Les applications React peuvent devenir très importantes. Les noms d’animation CSS et les noms de classe sont, par défaut, étendus globalement. Ce paramètre peut être 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 l’animation et les noms 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 obtient un nom de programmation unique, évitant les conflits.
Pour implémenter des modules CSS, créez un fichier avec .module.css. Si vous souhaitez nommer votre feuille de style en tant que 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 sur votre App.js comme suit ;
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 de l’utilisation des modules CSS
- S’intègre facilement avec SCSS et CSS
- Évite les conflits de noms de classe
Inconvénients de l’utilisation des modules CSS
- Référencer des noms de classe à l’aide de modules CSS peut être déroutant pour les débutants.
Utiliser des composants stylé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 fourni avec des styles. Les composants stylés offrent un style dynamique et des noms de classe uniques.
Pour commencer à utiliser les composants stylisés, vous pouvez installer le package sur votre dossier racine à l’aide de cette commande ;
npm install styled-components
L’étape suivante consiste à importer des composants stylés dans votre application React
Voici un extrait de code d’App.js qui utilise 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 à partir des composants stylés.
Avantages des composants stylés
- C’est prévisible. Les styles de cette approche de style sont imbriqués dans des composants individuels.
- Inutile de vous focaliser sur les conventions de nommage de vos classes. Écrivez simplement vos styles et le paquet s’occupera du reste.
- Vous pouvez exporter des composants stylés en tant qu’accessoires. Les composants stylés convertissent les CSS normaux en composants React. Vous pouvez ainsi réutiliser ce code, étendre les styles via des props et exporter.
Inconvénients des composants stylés
- Vous devez installer une bibliothèque tierce pour commencer.
Feuilles de style syntaxiquement impressionnantes (SASS/ SCSS)
SASS est livré avec des outils et des fonctionnalités plus puissants qui manquent dans le CSS normal. 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 habituel. 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 apparaîtra comme suit ;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline 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 les extensions .scss ou .sass. Vous pouvez ensuite importer vos fichiers de la manière habituelle. Par exemple;
import "./Components/App.sass";
Avantages de SASS/SCSS
- Il est livré avec de nombreuses fonctionnalités dynamiques telles que les mixins, l’imbrication et l’extension.
- Vous n’avez pas beaucoup de passe-partout pour écrire du code CSS lorsque vous utilisez SASS/SCSS
Inconvénients du SASS/SCSS
- Les styles sont globaux et vous pouvez donc rencontrer des problèmes majeurs.
Quelle est la meilleure approche de style?
Puisque nous avons discuté de cinq approches, vous voulez savoir laquelle est la meilleure. Il est difficile de mettre en évidence le vainqueur absolu dans cette discussion. Cependant, ces considérations vous aideront à prendre une décision éclairée :
- Les indicateurs de performances
- Que vous ayez besoin d’un système de conception
- La facilité d’optimiser votre code
Le style en ligne convient lorsque vous avez une application simple avec quelques lignes de code. Cependant, tous les autres; external, SASS, Styled Components et CSS Modules, conviennent aux grandes applications.
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 adaptée à vos besoins.
- Lintez votre code. Les linters tels que Stylelint mettront en évidence les erreurs de style dans votre code afin que vous puissiez les corriger rapidement.
- Faites des revues de code régulières. Écrire du CSS semble amusant, mais des revues de code régulières facilitent l’identification précoce des bogues.
- Automatisez les tests sur vos fichiers CSS. Enzyme et Jest sont des outils formidables que vous pouvez utiliser pour automatiser les tests sur votre code CSS.
- Gardez votre code SEC. lorsqu’il s’agit de styles couramment utilisés tels que les couleurs et les marges, utilisez des variables et des classes utilitaires conformément au principe Ne vous répétez pas (DRY).
- Utilisez des conventions de nommage telles que Block Element Modifier. Une telle approche facilite l’écriture de classes CSS faciles à comprendre et à réutiliser.
Conclusion
Vous trouverez ci-dessus quelques-unes des façons 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 des feuilles de style en ligne et externes, dans votre application React.
Vous pouvez également explorer certains des meilleurs frameworks et bibliothèques CSS pour les développeurs front-end.