Mise en forme et CSS fr FR
Résumé : Ce guide explique la stratégie CSS en 3 niveaux de StartER, du style sémantique avec Pico CSS via CDN jusqu'au CSS par composant et à la configuration de frameworks personnalisés.
Ce que vous apprendrez :
- Comprendre la philosophie CSS agnostique et « classless » de StartER
- Personnaliser le thème global via les variables CSS de Pico dans
src/react/index.css - Ajouter des fichiers CSS par composant avec Vite
- Configurer Tailwind CSS ou un autre framework CSS si désiré
StartER fait le choix délibéré de rester agnostique en matière de CSS. Au lieu de vous imposer un framework complexe (comme Tailwind, Sass ou du CSS-in-JS), StartER propose une stratégie de mise en forme en 3 niveaux qui démarre sans aucune configuration et évolue selon les besoins de votre projet.
┌───────────────────────────────────────────────────────────────────────────┐
│ Niveau 1 : HTML sémantique (Pico CSS via CDN dans index.html) │
│ └── Style automatique pour <article>, <header>, <nav>, <button>, etc. │
├───────────────────────────────────────────────────────────────────────────┤
│ Niveau 2 : Personnalisation globale du thème (src/react/index.css) │
│ └── Surcharge des variables CSS comme --pico-primary, --pico-font-family │
├───────────────────────────────────────────────────────────────────────────┤
│ Niveau 3 : CSS par composant (Imports CSS natifs avec Vite) │
│ └── Import direct de styles spécifiques (import "./ItemCard.css") │
└───────────────────────────────────────────────────────────────────────────┘
StartER inclut Pico CSS via CDN dans index.html. Pico est un framework CSS « classless » : il applique automatiquement des styles élégants aux éléments sémantiques HTML5 sans vous obliger à ajouter des classes utilitaires.
Écrivez simplement des balises HTML standards dans vos composants React :
function ItemCard({ title, content }: { title: string; content: string }) {
return (
<article>
<header>
<h3>{title}</h3>
</header>
<p>{content}</p>
<footer>
<button type="button">En savoir plus</button>
</footer>
</article>
);
}Pico applique automatiquement un espacement propre, une typographie soignée, des bordures de cartes et des effets au survol.
-
Mise en page et structure :
<header>,<main>,<footer>,<nav>,<article>,<aside>,<section> -
Formulaires et champs :
<form>,<input>,<select>,<textarea>,<button>,<fieldset>,<label> -
Boîtes de dialogue :
<dialog> -
Tableaux et listes :
<table>,<ul>,<ol>,<dl>
Pour modifier la couleur principale, la police ou les angles arrondis de votre application, éditez src/react/index.css.
Pico CSS s'appuie sur des variables CSS natives définies sur le sélecteur :root :
/* src/react/index.css */
:root {
/* Couleur principale de marque (boutons, liens actifs, accents) */
--pico-primary: #6366f1;
--pico-primary-background: #6366f1;
--pico-primary-underline: rgba(99, 102, 241, 0.5);
/* Typographie */
--pico-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Géométrie */
--pico-border-radius: 0.5rem;
}Tip
Consultez la documentation de la palette de couleurs de Pico CSS pour la liste complète des variables personnalisables.
Pico CSS gère le mode sombre nativement, sans aucune configuration supplémentaire.
Par défaut, Pico détecte et s'adapte automatiquement à la préférence de mode sombre/clair du système d'exploitation de l'utilisateur (prefers-color-scheme).
Pour forcer un thème spécifique globalement, définissez l'attribut data-theme sur l'élément <html> dans index.html :
<!-- Forcer le mode sombre -->
<html data-theme="dark">
<!-- Forcer le mode clair -->
<html data-theme="light">Pour permettre aux utilisateurs de basculer dynamiquement de thème dans React :
export function ThemeToggle() {
const toggle = () => {
const html = document.documentElement;
const current = html.getAttribute("data-theme");
html.setAttribute("data-theme", current === "dark" ? "light" : "dark");
};
return (
<button type="button" onClick={toggle} className="secondary outline">
Changer de thème
</button>
);
}Lorsqu'un composant React nécessite un style spécifique non couvert par Pico, créez un fichier .css à côté de votre composant. Vite gère nativement l'importation de fichiers CSS au sein des composants React, sans configuration supplémentaire.
- Créez
src/react/components/item/ItemCard.css:
.item-badge {
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--pico-primary-inverse);
background-color: var(--pico-primary);
border-radius: var(--pico-border-radius);
}- Importez-le dans
src/react/components/item/ItemCard.tsx:
import "./ItemCard.css";
export function ItemCard() {
return <span className="item-badge">En vedette</span>;
}Si vous préférez une approche utilitaire avec Tailwind CSS, l'installation prend quelques secondes grâce à Vite :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/react/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};Remplacez le contenu de src/react/index.css par :
@tailwind base;
@tailwind components;
@tailwind utilities;Vite compilera automatiquement Tailwind CSS lors du développement et lors du build de production.
Co-création IA
Bien démarrer
Explications
Guides
Référence
Aller plus loin