CSS classique (`className`) et feuilles de style globales/locales

Apprenez les bases du styling en React : l'utilisation de l'attribut `className` et l'importation de feuilles de style CSS globales ou locales pour vos composants.

Les bases du CSS traditionnel dans l'écosystème react

L'approche la plus directe pour styliser des composants React s'appuie sur les fondamentaux du développement web : le CSS classique. Si vous venez du HTML et CSS traditionnels, cette méthode vous semblera familière. La principale différence réside dans la manière dont vous appliquez les classes CSS aux éléments.

En JSX, l'attribut utilisé pour assigner une classe CSS n'est pas `class`, mais `className`. Cette distinction est cruciale car `class` est un mot-clé réservé en JavaScript (utilisé pour définir des classes ES6). React utilise donc `className` pour éviter toute ambiguïté. L'utilisation est simple : vous assignez une chaîne de caractères contenant le nom de votre classe CSS à l'attribut `className` de votre élément JSX.

Voici un exemple simple d'application d'une classe CSS à un élément `

` dans un composant React :

// MonComposant.js
import React from 'react';
import './MonComposant.css'; // Importation de la feuille de style locale

function MonComposant() {
  return (
    
      Bonjour React !
      Ceci est un paragraphe stylisé.
    
  );
}

export default MonComposant;

/* MonComposant.css */
.titre-principal {
  color: navy;
  font-size: 2em;
}

.texte-intro {
  color: grey;
  font-style: italic;
}

Dans cet exemple, le fichier `MonComposant.css` contient les définitions des classes `titre-principal` et `texte-intro`, qui sont ensuite appliquées aux éléments correspondants via l'attribut `className`.

Gérer les feuilles de style : Globales vs locales

En React, vous pouvez organiser vos fichiers CSS de deux manières principales : globalement ou localement (par composant).

Feuilles de style globales : Souvent, une application React importe une feuille de style principale (par exemple, `index.css` ou `App.css`) dans le fichier racine de l'application (`index.js` ou `App.js`). Les styles définis dans ce fichier sont disponibles pour toute l'application. C'est pratique pour définir des styles de base (reset CSS, typographie par défaut, variables CSS globales). Cependant, le principal inconvénient est la portée globale : toutes les règles CSS sont dans le même espace de noms, ce qui peut entraîner des conflits de noms de classes si l'on ne fait pas attention, surtout dans les projets de grande taille. La maintenance peut aussi devenir complexe.

// index.js (ou App.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // Importation de la feuille de style globale
import App from './App';

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

/* index.css */
body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f0f0f0;
}

button {
  padding: 10px 15px;
  cursor: pointer;
}

Feuilles de style locales (par composant) : Une pratique courante consiste à créer un fichier CSS distinct pour chaque composant (par exemple, `Button.css` pour `Button.js`). Ce fichier est ensuite importé directement dans le fichier JavaScript du composant correspondant, comme vu dans le premier exemple avec `MonComposant.css`. Cela améliore l'organisation et la colocation du code et des styles. Toutefois, il est important de comprendre que même si vous importez le CSS localement, les règles restent globales par défaut. Si deux composants différents définissent une classe avec le même nom (par exemple, `.container`), la dernière règle chargée l'emportera, ou elles pourraient interférer. Pour pallier cela sans outils supplémentaires, les développeurs adoptent souvent des conventions de nommage strictes comme BEM (Block, Element, Modifier) pour créer des noms de classes uniques et éviter les collisions (ex: `.mon-composant__titre--important`).

En résumé, l'approche classique avec `className` et les fichiers CSS est simple à démarrer mais nécessite de la rigueur (conventions de nommage) ou des outils supplémentaires (comme les CSS Modules ou CSS-in-JS, abordés ensuite) pour gérer efficacement la portée des styles dans les applications plus conséquentes.

◄ Précédent Suivant ►

く