Consolidation CSS

BEM, Organisation des fichiers & DevTools

Vendredi — Consolidation des acquis

Plan du cours

1

Revue rapide : HTML sémantique, CSS cascade/box model, Flexbox, Grid

2

Introduction Ă  la convention de nommage BEM

3

Organisation des fichiers CSS : structure et conventions

4

DĂ©mo live : debug CSS avec les DevTools

5

Lancement du mini-projet : landing page de A Ă  Z

Section 1

Revue Rapide de la Semaine

Ce qu'on a appris cette semaine

HTML SĂ©mantique

<header>, <main>, <article>, <section>...

Cascade CSS

Origine, spécificité, ordre du code

Box Model

content, padding, border, margin

Flexbox

display: flex, justify-content, align-items

CSS Grid

grid-template-columns, grid-gap, fr units

Section 2

Convention de Nommage BEM

Block — Element — Modifier

Qu'est-ce que BEM ?

Une convention de nommage pour garder le CSS maintenable

.block__element--modifier

Block

Composant autonome

Element

Partie du block

Modifier

Variante ou Ă©tat

Exemples concrets

HTML

<div class="card">

<img class="card__image" />

<h2 class="card__title">Titre</h2>

<button class="card__button">

<button class="card__button--disabled">

CSS

.card { }

.card__image { }

.card__title { }

.card__button { }

.card__button--disabled { }

⚠️ Pièges courants BEM

Confusion entre élément (__) et modifier (--)

__ = partie d'un block | -- = variante d'un block ou élément

Imbrication excessive

❌ .block__element__subelement

âś“ .block__subelement

Noms trop longs

Privilégiez des noms courts mais descriptifs

Section 3

Organisation des Fichiers CSS

Structure recommandée

L'ordre d'importation compte !

1

Variables CSS

Couleurs, espacements, typographie

2

Reset / Normalize

Styles de base du navigateur

3

Base

Typographie, liens, boutons génériques

4

Components

Cards, forms, navigation, modals

5

Layout

Header, footer, grid principale

Organisation des fichiers

css/

├── variables.css

├── reset.css

├── base.css

components/

├── card.css

├── button.css

├── form.css

layout/

├── header.css

├── footer.css

└── grid.css

└── main.css

âś“ Un fichier par composant = CSS maintenable

Section 4

Debug CSS avec DevTools

L'onglet Computed

Votre meilleur ami pour débugger le Box Model

1

Clic droit sur l'élément → Inspecter

2

Panneau Elements

3

Onglet Computed

Visualisation du Box Model :

margin
border
padding
content

Tips DevTools

âś“ Modifier les valeurs en live

Double-cliquez sur une valeur pour la changer

✓ Voir les styles hérités

Les styles barrés sont surchargés

âś“ Mesurer les dimensions

Survolez un élément pour voir ses dimensions

âś“ Raccourci rapide

F12 ou Ctrl+Shift+I

Astuce : Utilisez l'onglet Computed pour comprendre pourquoi un élément a une certaine taille !

Section 5

Mini-Projet : Landing Page

Construire une landing page de A Ă  Z

Objectifs du projet

✓ Structure HTML sémantique

header, main, sections, footer

âś“ Convention BEM

Nommage cohérent des classes

✓ CSS organisé

Fichiers séparés par responsabilité

✓ Box Model maîtrisé

border-box, espacements cohérents

Rappel : L'objectif est la progression, pas la perfection pixel-parfaite !

Points clés à retenir

BEM = CSS maintenable

.block__element--modifier

Organisation des fichiers

variables → reset → base → components → layout

DevTools Computed

L'outil indispensable pour débugger le Box Model

⚠️ Pièges courants à éviter

Pixel-perfect obsession

Encouragez la progression, pas la perfection

Confusion BEM : __ vs --

__ = élément | -- = modifier

Un seul fichier CSS

Séparez vos styles par responsabilité

C'est un vendredi : L'objectif est de consolider, pas d'introduire de nouveaux concepts complexes.

Ressources

Documentation BEM

getbem.com

MDN CSS

developer.mozilla.org

CSS-Tricks

css-tricks.com

DevTools

F12 ou Ctrl+Shift+I

Questions ?

C'est l'heure du mini-projet !

Bonne chance pour votre landing page !