CSS-in-JS

Definition

Approche qui écrit le CSS directement en JavaScript (styled-components, Emotion). Les styles sont scopés au composant, peuvent utiliser des variables JS et sont générés au runtime ou au build.

Analogie

Comme un chef qui prépare la sauce directement dans le plat au lieu de la préparer séparément.

Exemple de code

import styled from 'styled-components';

const Button = styled.button<{ $primary?: boolean }>`
  background: ${p => p.$primary ? 'blue' : 'gray'};
  color: white;
  padding: 0.5rem 1rem;
`;

Cas d'usage

Applications React avec styles dynamiques basés sur les props ou le thème.

Anti-pattern

Termes lies