# CSS-in-JS

> Technique consistant à écrire les styles directement dans le code JavaScript d'un composant, généralement générés puis injectés dynamiquement dans la page.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/css-in-js/

Dans une application composée de dizaines de petits composants réutilisables, garder une feuille de style séparée pour chacun devient vite ingérable : classes qui se marchent dessus, styles orphelins qu'on n'ose plus supprimer. Rapprocher le style du composant qu'il habille, jusqu'à l'écrire dans le même fichier JavaScript, est la réponse qu'apportent plusieurs bibliothèques nées dans l'écosystème React.

## Une présence bien réelle dans l'éditeur de blocs

C'est justement dans ce contexte que WordPress croise cette technique : l'éditeur de blocs (Gutenberg) est une application React, et son ensemble de composants d'interface, `@wordpress/components`, s'appuie sur la bibliothèque Emotion pour générer une partie de ses styles internes. Un développeur créant un bloc personnalisé avec le framework JavaScript moderne peut adopter la même approche pour les écrans d'administration de son extension, plutôt qu'une feuille CSS classique chargée séparément.

## Exemple avec Emotion

```
/* @jsx jsx */
import { jsx, css } from '@emotion/react';

const styleBouton = css`
  padding: 8px 16px;
  border-radius: 4px;
`;

const Bouton = () => <button css={styleBouton}>Valider</button>;
```

## À ne pas confondre avec

- Un style en ligne classique via l'attribut `style` : cette technique génère de véritables classes CSS insérées dans une balise `<style>`, avec tous les avantages de la cascade et des pseudo-classes.
- Le contenu public d'un site WordPress classique côté front, qui continue très majoritairement à charger des feuilles de style via `wp_enqueue_style()`, cette technique restant surtout pertinente pour des interfaces JavaScript complexes.