CSS : ce que tu dois savoir

Introduction — Pourquoi le CSS est indispensable

Le CSS — Cascading Style Sheets (feuilles de style en cascade) — est le langage qui transforme une page HTML brute en une interface visuellement agréable et professionnelle. Sans CSS, le web serait une collection de textes noirs sur fond blanc, sans mise en page, sans couleurs, sans animations.

Introduit en 1996 par le W3C, le CSS a évolué au fil des versions. Avec CSS3, apparu dans les années 2010 sous forme de modules indépendants, nous disposons aujourd'hui d'outils puissants : flexbox, grid, animations, variables, filtres, et bien plus. Comprendre le CSS en profondeur est une compétence fondamentale pour tout développeur front-end ou intégrateur web.

À retenir : CSS est un langage déclaratif. Vous décrivez comment les éléments doivent s'afficher, et le navigateur s'en charge. Il ne contient pas de logique algorithmique comme JavaScript.

Le CSS fonctionne en trio avec HTML et JavaScript : HTML structure le contenu, CSS le présente, et JavaScript le rend interactif. Maîtriser le CSS, c'est maîtriser l'apparence, la lisibilité et l'ergonomie de vos interfaces.

Les bases du CSS

Une règle CSS est composée d'un sélecteur (ce qu'on cible) et d'un bloc de déclarations (les styles appliqués). Chaque déclaration est une paire propriété: valeur;.

/* Syntaxe de base d'une règle CSS */
sélecteur {
    propriété: valeur;
    autre-propriété: autre-valeur;
}

/* Exemples concrets */
h1 {
    color: #2c3e50;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

p {
    line-height: 1.7;
    color: #555;
    max-width: 70ch; /* 70 caractères de large = lisibilité optimale */
}

/* Commentaire CSS : entre /* et */ */

Les trois façons d'intégrer du CSS

Il existe trois méthodes pour appliquer du CSS à une page HTML. Chacune a ses cas d'usage :

<!-- 1. CSS inline (style direct sur l'élément) -->
<p style="color: red; font-weight: bold;">Texte en rouge</p>
<!-- ❌ Éviter : difficile à maintenir, non réutilisable -->

<!-- 2. CSS interne (balise <style> dans <head>) -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>
<!-- ⚠️ Acceptable pour de petits projets ou des emails HTML -->

<!-- 3. CSS externe (fichier .css séparé) ✅ RECOMMANDÉ -->
<head>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<!-- ✅ Séparation des responsabilités, cache navigateur, réutilisable -->

À retenir : Toujours préférer le CSS dans un fichier externe. Cela permet la mise en cache par le navigateur, la réutilisation sur plusieurs pages, et une meilleure séparation entre structure (HTML) et présentation (CSS).

Les sélecteurs CSS

Les sélecteurs définissent quels éléments HTML sont ciblés par les règles CSS. C'est l'une des parties les plus riches du CSS — bien les maîtriser évite d'écrire du code inutile et améliore la maintenabilité.

Sélecteurs de base

/* Sélecteur de balise : cible tous les éléments <p> */
p { color: #333; }

/* Sélecteur de classe : cible les éléments avec class="btn" */
.btn { padding: 0.5rem 1rem; border-radius: 4px; }

/* Sélecteur d'ID : cible l'élément avec id="navbar" */
#navbar { background: #1a1a2e; }

/* Sélecteur universel : cible TOUS les éléments */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Sélecteur d'attribut : cible les <input> de type email */
input[type="email"] { border: 1px solid #ccc; }

/* Sélecteur d'attribut partiel : cible les href contenant "github" */
a[href*="github"] { color: #6e5494; }

Les combinateurs

/* Descendant : <p> à n'importe quel niveau dans .card */
.card p { font-size: 0.9rem; }

/* Enfant direct : uniquement les <li> directs de <ul> */
ul > li { list-style: disc; }

/* Frère adjacent : l'élément <p> qui suit immédiatement <h2> */
h2 + p { margin-top: 0.5rem; font-weight: 600; }

/* Frères généraux : tous les <p> frères après <h2> */
h2 ~ p { color: #666; }

Pseudo-classes

/* Survol de la souris */
.btn:hover { background-color: #2980b9; transform: translateY(-2px); }

/* Focus clavier (accessibilité) */
input:focus { outline: 2px solid #3498db; border-color: #3498db; }

/* Premier et dernier enfant */
li:first-child { font-weight: bold; }
li:last-child  { border-bottom: none; }

/* Sélection par position */
tr:nth-child(even) { background: #f8f9fa; } /* lignes paires */
tr:nth-child(odd)  { background: #ffffff; } /* lignes impaires */

/* État d'un lien */
a:visited { color: #9b59b6; }
a:active  { color: #e74c3c; }

/* Cible vide */
p:empty { display: none; }

/* Champ obligatoire valide/invalide */
input:valid   { border-color: #27ae60; }
input:invalid { border-color: #e74c3c; }

Pseudo-éléments

/* Insérer du contenu avant/après un élément */
.section-title::before {
    content: "▶ ";
    color: #3498db;
}

.required-field::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

/* Première lettre (style "lettrines") */
p::first-letter {
    font-size: 2.5em;
    float: left;
    line-height: 0.8;
    margin-right: 4px;
    color: #2c3e50;
}

/* Sélection de texte par l'utilisateur */
::selection {
    background-color: #3498db;
    color: white;
}

La spécificité CSS

Quand plusieurs règles s'appliquent au même élément, le navigateur utilise la spécificité pour déterminer laquelle a priorité. La règle : plus le sélecteur est précis, plus sa spécificité est haute.

* — spécificité 0
Sélecteur de balise (p, div) — spécificité 1
Classe, attribut, pseudo-classe (.btn, :hover) — spécificité 10
ID (#navbar) — spécificité 100
Style inline (style="") — spécificité 1000
!important — écrase tout (à éviter)

Note : Si deux règles ont la même spécificité, c'est la dernière déclarée dans le fichier CSS qui l'emporte. C'est la règle de la cascade.

Le Box Model

Chaque élément HTML est représenté comme une boîte rectangulaire dans le navigateur. Cette boîte est composée de quatre couches concentriques, de l'intérieur vers l'extérieur :

content — le contenu réel (texte, image…)
padding — espace intérieur entre le contenu et la bordure
border — la bordure de l'élément
margin — espace extérieur entre cet élément et les éléments voisins

/* Représentation du Box Model */

/* ┌─────────────────────────────────────┐
   │              MARGIN                 │  ← espace extérieur
   │   ┌─────────────────────────────┐   │
   │   │           BORDER            │   │  ← cadre visible
   │   │   ┌─────────────────────┐   │   │
   │   │   │       PADDING       │   │   │  ← espace intérieur
   │   │   │   ┌─────────────┐   │   │   │
   │   │   │   │   CONTENT   │   │   │   │  ← texte, image…
   │   │   │   └─────────────┘   │   │   │
   │   │   └─────────────────────┘   │   │
   │   └─────────────────────────────┘   │
   └─────────────────────────────────────┘  */

.card {
    width: 300px;
    padding: 20px;            /* 20px de tous les côtés */
    border: 2px solid #ddd;
    margin: 16px auto;        /* 16px haut/bas, centré horizontalement */
}

/* Raccourcis padding / margin */
padding: 10px;                /* 4 côtés identiques */
padding: 10px 20px;           /* haut/bas | gauche/droite */
padding: 10px 20px 15px;      /* haut | gauche/droite | bas */
padding: 10px 20px 15px 5px;  /* haut | droite | bas | gauche (sens horaire) */

box-sizing : la propriété qui change tout

Par défaut (box-sizing: content-box), la largeur déclarée ne compte que le contenu. Ajouter padding et bordure agrandit l'élément, ce qui rend les calculs imprévisibles. Avec border-box, la largeur inclut le padding et la bordure.

/* Reset universel — à mettre dans TOUS vos projets */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Exemple concret */
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

/* Avec content-box (défaut) : largeur réelle = 200 + 40 + 10 = 250px */
/* Avec border-box          : largeur réelle = 200px TOUJOURS ✅ */

À retenir : Ajoutez toujours * { box-sizing: border-box; } en début de fichier CSS. Cela simplifie radicalement les calculs de mise en page et évite des surprises lors du redimensionnement.

Les unités CSS

Le CSS offre de nombreuses unités de mesure. Bien choisir son unité améliore la fluidité, le responsive et l'accessibilité.

Unités absolues

/* px — pixel : unité absolue, ne s'adapte pas */
.title { font-size: 24px; }    /* 24 pixels fixes */
.border { border: 1px solid #ccc; } /* Bien pour les bordures fines */

Unités relatives au parent

/* % — pourcentage du parent */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.col-half   { width: 50%; }   /* moitié de la largeur du parent */

/* em — relatif à la font-size de l'ÉLÉMENT lui-même (ou son parent) */
.card {
    font-size: 16px;
    padding: 1.5em;   /* 1.5 × 16px = 24px */
}
.card h2 {
    font-size: 1.25em; /* 1.25 × 16px = 20px */
    margin-bottom: 0.75em;
}

Unités relatives à la racine

/* rem — relatif à la font-size de <html> (généralement 16px) */
/* ✅ Recommandé pour les tailles de texte — respecte les préférences utilisateur */
html { font-size: 16px; } /* base explicite */

h1 { font-size: 2.5rem; }   /* 40px */
h2 { font-size: 2rem; }     /* 32px */
h3 { font-size: 1.5rem; }   /* 24px */
p  { font-size: 1rem; }     /* 16px */
small { font-size: 0.875rem; } /* 14px */

Unités du viewport

/* vw — 1% de la LARGEUR du viewport */
/* vh — 1% de la HAUTEUR du viewport */
.hero {
    width: 100vw;     /* pleine largeur de l'écran */
    height: 100vh;    /* pleine hauteur de l'écran */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titre fluide avec clamp() */
h1 {
    /* min 1.5rem, idéal 4vw, max 3rem */
    font-size: clamp(1.5rem, 4vw, 3rem);
}

/* fr — fraction (uniquement dans CSS Grid) */
.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 25% | 50% | 25% */
}

Règle d'or des unités :

Tailles de police → rem
Espacements (padding, margin) → rem ou em
Bordures, ombres → px
Mises en page → %, fr, vw/vh
Titres fluides → clamp()

Les couleurs en CSS

CSS propose plusieurs notations pour exprimer les couleurs. Chacune a ses avantages selon le contexte.

/* 1. Noms de couleurs (147 couleurs nommées) */
color: red;
color: cornflowerblue;
color: transparent;

/* 2. Hexadécimal */
color: #e74c3c;       /* rouge — format #RRGGBB */
color: #fff;          /* blanc — raccourci #RGB */
color: #e74c3ccc;     /* rouge avec 80% d'opacité — format #RRGGBBAA */

/* 3. RGB / RGBA */
color: rgb(231, 76, 60);          /* rouge pur */
color: rgba(231, 76, 60, 0.8);    /* rouge à 80% d'opacité */

/* 4. HSL / HSLA — teinte (0-360°), saturation (%), luminosité (%) */
/* ✅ Le plus intuitif pour ajuster les couleurs */
color: hsl(6, 78%, 57%);           /* rouge */
color: hsl(6, 78%, 80%);           /* rouge pastel (plus clair) */
color: hsl(6, 78%, 30%);           /* rouge foncé (plus sombre) */
color: hsla(6, 78%, 57%, 0.5);     /* rouge semi-transparent */

Les variables CSS (Custom Properties)

Les variables CSS permettent de définir des valeurs réutilisables dans toute la feuille de style. Elles sont indispensables pour construire un système de design cohérent et maintenable.

/* Définition des variables dans :root (portée globale) */
:root {
    /* Palette de couleurs */
    --color-primary:   #3498db;
    --color-secondary: #2ecc71;
    --color-danger:    #e74c3c;
    --color-text:      #2c3e50;
    --color-muted:     #7f8c8d;
    --color-bg:        #f8f9fa;
    --color-border:    #dee2e6;

    /* Typographie */
    --font-family-base: 'Manrope', sans-serif;
    --font-size-base:   1rem;
    --line-height-base: 1.7;

    /* Espacements */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;

    /* Rayon de bordure */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
}

/* Utilisation */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    /* Modifier via calc() */
    background-color: hsl(from var(--color-primary) h s calc(l - 10%));
    box-shadow: var(--shadow-md);
}

/* Thème sombre avec surcharge des variables */
[data-theme="dark"] {
    --color-text: #ecf0f1;
    --color-bg:   #1a1a2e;
    --color-border: #2c2c54;
}

À retenir : Les variables CSS sont en cascade et héritées. Vous pouvez les surcharger localement dans un composant sans affecter le reste de la page. C'est la base des systèmes de design et des thèmes sombre/clair.

Flexbox

Flexbox (Flexible Box Layout) est un modèle de mise en page unidimensionnel : il gère soit une ligne, soit une colonne à la fois. Il est parfait pour aligner des éléments, distribuer l'espace et gérer les tailles relatives dans un conteneur.

/* ===== Propriétés du CONTENEUR flex ===== */

.container {
    display: flex;                   /* Active flexbox */

    /* Direction principale */
    flex-direction: row;             /* → gauche à droite (défaut) */
    flex-direction: row-reverse;     /* ← droite à gauche */
    flex-direction: column;          /* ↓ haut en bas */
    flex-direction: column-reverse;  /* ↑ bas en haut */

    /* Retour à la ligne si les éléments dépassent */
    flex-wrap: nowrap;   /* pas de retour (défaut) */
    flex-wrap: wrap;     /* retour à la ligne */

    /* Alignement sur l'axe PRINCIPAL (justify) */
    justify-content: flex-start;    /* tassé au début */
    justify-content: flex-end;      /* tassé à la fin */
    justify-content: center;        /* centré */
    justify-content: space-between; /* espaces entre les éléments */
    justify-content: space-around;  /* espaces égaux autour */
    justify-content: space-evenly;  /* espaces parfaitement égaux */

    /* Alignement sur l'axe CROISÉ (align) */
    align-items: stretch;     /* étire (défaut) */
    align-items: flex-start;  /* en haut */
    align-items: flex-end;    /* en bas */
    align-items: center;      /* centré verticalement */
    align-items: baseline;    /* aligné sur la ligne de base du texte */

    /* Espacement entre les éléments */
    gap: 1rem;            /* même espacement horizontal et vertical */
    gap: 1rem 2rem;       /* gap-row | gap-column */
}

/* ===== Propriétés des ENFANTS flex (items) ===== */

.item {
    /* Ordre d'affichage (sans changer le HTML) */
    order: 0;          /* défaut */
    order: -1;         /* passe en premier */
    order: 2;          /* passe en dernier */

    /* Croissance : combien cet élément peut grandir */
    flex-grow: 0;      /* ne grandit pas (défaut) */
    flex-grow: 1;      /* prend tout l'espace disponible */

    /* Rétrécissement : combien il peut se réduire */
    flex-shrink: 1;    /* peut rétrécir (défaut) */
    flex-shrink: 0;    /* ne rétrécit JAMAIS (taille fixe) */

    /* Taille de base avant distribution */
    flex-basis: auto;   /* basé sur le contenu (défaut) */
    flex-basis: 200px;  /* taille initiale fixe */
    flex-basis: 33.33%; /* taille initiale en pourcentage */

    /* Raccourci : grow | shrink | basis */
    flex: 1;            /* = flex: 1 1 0 → répartition égale */
    flex: 0 0 250px;    /* taille fixe, ne grandit ni réduit */

    /* Alignement individuel (surcharge align-items du parent) */
    align-self: center;
    align-self: flex-end;
}

Cas pratiques Flexbox

/* Centrer parfaitement un élément (horizontalement ET verticalement) */
.centered-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Navbar responsive */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

/* Cartes de même hauteur en ligne */
.cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.card {
    flex: 1 1 280px;   /* base 280px, grandit pour remplir */
    display: flex;
    flex-direction: column;
}
.card-body {
    flex: 1;           /* pousse le pied de carte vers le bas */
}

/* Pied de page collé en bas (sticky footer) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main  { flex: 1; }
footer { flex-shrink: 0; }

À retenir : Flexbox est unidimensionnel. Pour des mises en page à deux dimensions (lignes ET colonnes simultanément), utilisez CSS Grid.

CSS Grid

CSS Grid est un système de mise en page bidimensionnel. Il gère simultanément les lignes et les colonnes, ce qui en fait l'outil idéal pour construire des layouts complexes (grilles de cartes, mises en page d'articles, dashboards).

/* ===== Propriétés du CONTENEUR grid ===== */

.grid-container {
    display: grid;

    /* Définir les colonnes */
    grid-template-columns: 200px 1fr 200px;  /* sidebar | main | sidebar */
    grid-template-columns: repeat(3, 1fr);    /* 3 colonnes égales */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* ✅ responsive */

    /* Définir les lignes */
    grid-template-rows: auto 1fr auto; /* header | main | footer */

    /* Espacement entre les cellules */
    gap: 1.5rem;           /* même horizontalement et verticalement */
    column-gap: 2rem;      /* seulement entre colonnes */
    row-gap: 1rem;         /* seulement entre lignes */
}

/* ===== Placement des ENFANTS ===== */

.item-wide {
    /* Occupe de la colonne 1 à 3 (span 2 colonnes) */
    grid-column: 1 / 3;
    /* Raccourci : span 2 colonnes depuis la position courante */
    grid-column: span 2;
}

.item-tall {
    /* Occupe de la ligne 1 à 3 (span 2 lignes) */
    grid-row: 1 / 3;
}

grid-template-areas — la mise en page visuelle

/* Définir des zones nommées — très lisible */
.page-layout {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar main    main  "
        "footer  footer  footer";
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
}

/* Assigner les éléments aux zones */
.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

/* Responsive : sur mobile, tout en colonne unique */
@media (max-width: 768px) {
    .page-layout {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}

auto-fill vs auto-fit

/* auto-fill : crée des colonnes vides si la place le permet */
.gallery-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Résultat : garde des colonnes vides à droite si peu d'éléments */

/* auto-fit : étire les colonnes pour remplir l'espace */
.gallery-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Résultat : les éléments s'étirent pour occuper toute la largeur ✅ */

Note : repeat(auto-fit, minmax(250px, 1fr)) est l'une des techniques les plus puissantes du CSS moderne. Elle crée une grille responsive sans media query : les cartes s'adaptent automatiquement selon la largeur de l'écran.

Responsive Design et Media Queries

Le responsive design consiste à adapter l'affichage d'un site à tous les types d'écrans : smartphones, tablettes, ordinateurs, grands moniteurs. L'outil central en CSS est la media query.

Syntaxe des media queries

/* Syntaxe de base */
@media (condition) {
    /* règles CSS appliquées uniquement si la condition est vraie */
}

/* Sur les écrans de moins de 768px */
@media (max-width: 767px) {
    .navbar { flex-direction: column; }
    .hero-title { font-size: 1.8rem; }
}

/* Sur les écrans entre 768px et 991px (tablette) */
@media (min-width: 768px) and (max-width: 991px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sur les écrans de 992px et plus */
@media (min-width: 992px) {
    .sidebar { display: block; }
}

/* Mode paysage sur mobile */
@media (orientation: landscape) and (max-width: 768px) {
    .hero { min-height: 60vh; }
}

/* Préférence utilisateur : thème sombre système */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a2e;
        --color-text: #ecf0f1;
    }
}

/* Préférence : moins d'animations (accessibilité) */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

L'approche Mobile First

L'approche mobile first consiste à écrire les styles de base pour les mobiles (petits écrans), puis à surcharger avec des media queries min-width pour les écrans plus larges. C'est l'approche recommandée aujourd'hui.

/* ===== MOBILE FIRST ===== */

/* Base : styles pour mobile (pas de media query) */
.container {
    width: 100%;
    padding: 0 1rem;
}

.grid-cards {
    display: grid;
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    gap: 1rem;
}

/* Tablette (≥ 576px) */
@media (min-width: 576px) {
    .container { padding: 0 1.5rem; }
}

/* Petite tablette (≥ 768px) */
@media (min-width: 768px) {
    .container { max-width: 960px; margin: 0 auto; }
    .grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (≥ 992px) */
@media (min-width: 992px) {
    .container { max-width: 1200px; }
    .grid-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Grand écran (≥ 1200px) */
@media (min-width: 1200px) {
    .grid-cards { grid-template-columns: repeat(4, 1fr); }
}

Breakpoints Bootstrap 4 (référence)

xs — < 576px (mobile portrait)
sm — ≥ 576px (mobile paysage)
md — ≥ 768px (tablette)
lg — ≥ 992px (desktop)
xl — ≥ 1200px (grand écran)

À retenir : Toujours ajouter la balise meta viewport dans <head> sinon les media queries ne fonctionneront pas sur mobile :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Animations et transitions

CSS permet de créer des animations fluides sans JavaScript. Deux mécanismes distincts existent : les transitions (passage d'un état A à un état B) et les animations (séquences d'états multiples avec @keyframes).

Les transitions

/* Syntaxe : transition: propriété durée timing-function délai; */

.btn {
    background-color: #3498db;
    color: white;
    padding: 0.6rem 1.4rem;
    border-radius: 6px;

    /* Transition simple sur 1 propriété */
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #2980b9;
}

/* Transition sur PLUSIEURS propriétés */
.card {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
    transition:
        transform    0.25s ease,
        box-shadow   0.25s ease,
        opacity      0.2s linear;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Fonctions de timing */
transition-timing-function: ease;        /* début lent, milieu rapide, fin lente (défaut) */
transition-timing-function: linear;      /* vitesse constante */
transition-timing-function: ease-in;     /* démarre lentement */
transition-timing-function: ease-out;    /* finit lentement */
transition-timing-function: ease-in-out; /* lent au début et à la fin */
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* personnalisé */

Les animations avec @keyframes

/* 1. Définir l'animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes spinner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 2. Appliquer l'animation */
.hero-title {
    animation: fadeInUp 0.6s ease-out both;
    /*          nom      durée timing   fill-mode */
}

.notification-badge {
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-icon {
    animation: spinner 0.8s linear infinite;
}

/* Propriétés d'animation */
.animated-element {
    animation-name:            fadeInUp;   /* nom du @keyframes */
    animation-duration:        0.5s;       /* durée */
    animation-timing-function: ease-out;   /* timing */
    animation-delay:           0.2s;       /* délai avant départ */
    animation-iteration-count: 1;          /* nombre de répétitions */
    animation-direction:       normal;     /* normal | reverse | alternate */
    animation-fill-mode:       both;       /* both | forwards | backwards | none */
    animation-play-state:      running;    /* running | paused */
}

La propriété transform

/* transform : ne perturbe PAS le flux du document (performant) */
.element {
    transform: translateX(20px);           /* déplacer horizontalement */
    transform: translateY(-10px);          /* déplacer verticalement */
    transform: translate(10px, -10px);     /* déplacer en X et Y */
    transform: scale(1.1);                 /* agrandir de 10% */
    transform: scale(0.8, 1);             /* réduire uniquement en largeur */
    transform: rotate(45deg);             /* rotation */
    transform: skewX(10deg);             /* déformation horizontale */

    /* Combinaison (ordre important !) */
    transform: translateY(-4px) scale(1.02) rotate(1deg);
}

Note performances : Pour des animations fluides (60fps), n'animez que transform et opacity. Ces propriétés sont gérées par le GPU et n'entraînent pas de recalcul du layout. Évitez d'animer width, height, margin, top…

Bonnes pratiques CSS

La convention BEM (Block Element Modifier)

BEM est une convention de nommage des classes CSS qui améliore la lisibilité, la prévisibilité et la réutilisabilité du code.

/* BEM : Block__Element--Modifier */

/* Block : composant autonome */
.card { }

/* Element : partie du block (séparé par __) */
.card__header { }
.card__body   { }
.card__footer { }
.card__image  { }
.card__title  { }

/* Modifier : variante (séparé par --) */
.card--featured { border: 2px solid var(--color-primary); }
.card--dark     { background: #1a1a2e; color: white; }

/* Usage dans le HTML */
/* <div class="card card--featured">
     <div class="card__header">
       <h2 class="card__title">Titre</h2>
     </div>
     <div class="card__body">...</div>
   </div> */

Les variables CSS au cœur du design system

/* Un système de design cohérent via variables */
:root {
    /* Couleurs sémantiques */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error:   #e74c3c;
    --color-info:    #3498db;

    /* Espacements systématiques */
    --space-1: 0.25rem;  /*  4px */
    --space-2: 0.5rem;   /*  8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */

    /* Z-index organisés */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* Transitions réutilisables */
    --transition-fast:   0.15s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.5s ease;
}

Organisation du fichier CSS

/* ==========================================
   ORDRE RECOMMANDÉ DANS UN FICHIER CSS
   ========================================== */

/* 1. Variables CSS et reset */
:root { ... }
*, *::before, *::after { box-sizing: border-box; }

/* 2. Styles de base (typographie, body) */
body { ... }
h1, h2, h3 { ... }

/* 3. Utilitaires réutilisables */
.container { ... }
.flex-center { display: flex; align-items: center; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* 4. Composants (cards, buttons, forms…) */
.btn { ... }
.card { ... }

/* 5. Mise en page (layout) */
.navbar { ... }
.hero { ... }
.sidebar { ... }

/* 6. Pages spécifiques */
.home-section { ... }

/* 7. Media queries (regroupées à la fin, ou par composant) */
@media (max-width: 768px) { ... }

À retenir — Les 5 règles d'or :

✅ Toujours box-sizing: border-box en reset global
✅ Utiliser des variables CSS pour les couleurs, espacements, typographie
✅ Nommer les classes avec BEM ou une convention cohérente
✅ Préférer rem pour les tailles de police
❌ Éviter !important — c'est le signe d'une spécificité mal gérée

Erreurs fréquentes à éviter

1. Abuser de !important

/* ❌ Mauvaise pratique : crée une dette technique */
.btn { color: red !important; }
.nav a { color: blue !important; }

/* ✅ Solution : ajuster la spécificité ou restructurer le CSS */
.nav .btn { color: red; }  /* spécificité plus haute, pas besoin de !important */

2. Oublier box-sizing: border-box

/* ❌ Problème : .input dépasse son parent */
.form-group { width: 100%; }
.input { width: 100%; padding: 12px; border: 1px solid #ccc; }
/* Largeur réelle = 100% + 24px (padding) + 2px (border) → débordement ! */

/* ✅ Solution : reset global */
* { box-sizing: border-box; }
/* Maintenant width: 100% inclut padding et border ✅ */

3. Unités fixes sur les polices

/* ❌ px sur font-size ignore les préférences du navigateur */
html { font-size: 16px; }   /* bloque les réglages d'accessibilité */
p    { font-size: 14px; }   /* idem */

/* ✅ Utiliser rem pour respecter les préférences utilisateur */
html { font-size: 100%; }   /* hérite les préférences navigateur (souvent 16px) */
p    { font-size: 0.875rem; } /* 14px par défaut, mais s'adapte */

4. Oublier le meta viewport

<!-- ❌ Manquant → les media queries ne fonctionnent pas sur mobile -->
<head>
    <title>Mon site</title>
</head>

<!-- ✅ Obligatoire pour le responsive design -->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title>
</head>

5. Sélecteurs trop spécifiques

/* ❌ Trop spécifique : difficile à surcharger, fragile */
body div.container section.hero div.inner p.lead span.text {
    color: #333;
}

/* ✅ Simple, maintenable */
.hero-lead { color: #333; }

6. Animer des propriétés coûteuses

/* ❌ Provoque des recalculs de layout (reflow) à chaque frame */
@keyframes bad-slide {
    from { margin-left: -100px; }
    to   { margin-left: 0; }
}

/* ✅ Utiliser transform : géré par le GPU, 60fps garantis */
@keyframes good-slide {
    from { transform: translateX(-100px); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
}

7. Négliger le focus clavier

/* ❌ Supprimer l'outline sans alternative = inaccessible */
* { outline: none; }
a:focus { outline: none; }

/* ✅ Remplacer par un style personnalisé mais visible */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

Note : :focus-visible est une pseudo-classe moderne qui n'affiche le focus que lors de la navigation clavier (pas au clic souris). C'est le meilleur compromis entre esthétique et accessibilité.

Conclusion et ressources

Le CSS est bien plus qu'un simple outil de "coloriage" pour HTML. C'est un langage complet, avec ses règles de cascade, ses algorithmes d'héritage, ses systèmes de mise en page (Flexbox, Grid), ses capacités d'animation et son système de variables. Comprendre ses fondamentaux vous permettra de créer des interfaces modernes, accessibles et maintenables.

Le chemin d'apprentissage recommandé est le suivant :

Maîtriser la syntaxe, les sélecteurs et le box model
Utiliser Flexbox pour la plupart des mises en page simples
Adopter CSS Grid pour les layouts complexes et bidimensionnels
Intégrer les variables CSS et une convention de nommage dès le début
Penser mobile first et tester sur de vrais appareils
Consulter régulièrement MDN et Can I Use pour la compatibilité

✅ Toujours utiliser box-sizing: border-box en reset
✅ Définir une palette de variables CSS dans :root
✅ Penser mobile first avec min-width
✅ Choisir Flexbox pour 1D, Grid pour 2D
✅ N'animer que transform et opacity pour les performances
✅ Respecter l'accessibilité avec :focus-visible
❌ Ne jamais abuser de !important

Ressources recommandées

MDN Web Docs — CSS — La référence absolue. Documentation exhaustive sur chaque propriété CSS avec exemples interactifs.
CSS-Tricks — Des guides pratiques exceptionnels, notamment le Complete Guide to Flexbox et le Complete Guide to Grid.
Can I Use — Vérifiez la compatibilité navigateur de chaque propriété CSS avant de l'utiliser en production.
web.dev/learn/css — Le cours CSS de Google, structuré et progressif, idéal pour les débutants comme pour les intermédiaires.
CSS Gradient — Générateur visuel de dégradés CSS. Pratique et rapide.
cubic-bezier.com — Visualiseur interactif de courbes de Bézier pour les transitions personnalisées.

Prochaine étape : Après avoir maîtrisé le CSS pur, explorez des frameworks comme Bootstrap (composants préfaits) ou Tailwind CSS (utilitaires atomiques) pour accélérer votre développement front-end.