HTML & CSS : Niveau Expert

Écrire du CSS plus intelligemment

SASS permet d'utiliser des variables, des fonctions (mixins) et l'imbrication.

$primary-color: #ff6b81;

.button {
    background: $primary-color;
    &:hover {
        background: darken($primary-color, 10%);
    }
}

Organiser son code à grande échelle

Block Element Modifier (BEM) aide à nommer les classes pour éviter les conflits.

/* Exemple BEM */
.card {}
.card__title {}
.card__button--disabled {}

Fluidité et Optimisation

Utilisez transform et opacity pour des animations performantes (accélération GPU).

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

Layouts Intelligents et Sélecteurs Puissants

Le CSS évolue vite. Voici les fonctionnalités qui changent la donne :

1. CSS Subgrid

Permet à un élément enfant d'utiliser la grille de son parent.

.container { display: grid; grid-template-columns: 1fr 2fr 1fr; }
.item { grid-column: 1 / 4; display: grid; grid-template-columns: subgrid; }

2. Container Queries (@container)

Stylisez un élément en fonction de la taille de son parent, pas du viewport !

.card-container { container-type: inline-size; }
@container (min-width: 400px) {
    .card { display: flex; }
}

3. Le sélecteur parent :has()

Enfin possible de cibler un parent en fonction de ses enfants.

/* Cible la card uniquement si elle contient une image */
.card:has(img) { padding: 0; }
/* Cible le label si l'input suivant est coché */
label:has(+ input:checked) { color: green; }

4. :is() et :where()

Simplifiez vos sélecteurs complexes.

/* Au lieu de h1, h2, h3 inside article... */
article :is(h1, h2, h3) { margin-top: 2em; }