Aller au contenu principal

Module CSS.9 – Architecture CSS

Objectif​

Maîtriser l'architecture CSS : BEM, SMACSS, OOCSS, conventions de nommage pour créer du CSS maintenable et scalable en équipe.

Théorie​

Pourquoi une architecture CSS ?​

Problèmes sans architecture :

  • ❌ CSS difficile à maintenir
  • ❌ Conflits de styles
  • ❌ Spécificité incontrôlée
  • ❌ Code dupliqué
  • ❌ Difficile en équipe

Avantages d'une architecture :

  • ✅ Code organisé
  • ✅ Maintenable
  • ✅ Scalable
  • ✅ Réutilisable
  • ✅ Collaboration facilitée

BEM (Block Element Modifier)​

BEM = Block, Element, Modifier.

Structure :

.block
.block__element
.block--modifier
.block__element--modifier

Exemple :

/* Block */
.card { }

/* Element */
.card__title { }
.card__body { }
.card__footer { }

/* Modifier */
.card--featured { }
.card--large { }

/* Element avec modifier */
.card__title--highlighted { }

HTML :

<div class="card card--featured">
    <h2 class="card__title card__title--highlighted">Titre</h2>
    <p class="card__body">Contenu</p>
    <footer class="card__footer">Footer</footer>
</div>

Règles BEM :

  • Block : Composant indépendant
  • Element : Partie du block (__)
  • Modifier : Variation (--)

Avantages :

  • ✅ Spécificité faible et prévisible
  • ✅ Auto-documenté
  • ✅ Pas de conflits
  • ✅ Réutilisable

SMACSS (Scalable and Modular Architecture)​

5 catégories :

1. Base :

/* base.css */
html, body { }
h1, h2, h3 { }
a { }

2. Layout :

/* layout.css */
.l-header { }
.l-sidebar { }
.l-main { }
.l-footer { }

3. Module :

/* module.css */
.card { }
.button { }
.modal { }

4. State :

/* state.css */
.is-hidden { }
.is-active { }
.is-disabled { }

5. Theme :

/* theme.css */
.theme-dark { }
.theme-light { }

Structure de fichiers :

css/
├── base.css
├── layout.css
├── modules/
│   ├── card.css
│   ├── button.css
│   └── modal.css
├── state.css
└── theme.css

OOCSS (Object-Oriented CSS)​

Principe : Séparer structure et skin.

Structure :

.button {
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
}

Skin :

.button-primary {
    background-color: blue;
    color: white;
}

.button-secondary {
    background-color: gray;
    color: black;
}

HTML :

<button class="button button-primary">Primary</button>
<button class="button button-secondary">Secondary</button>

Avantages :

  • ✅ Réutilisabilité
  • ✅ Moins de code
  • ✅ Maintenance facile

ITCSS (Inverted Triangle CSS)​

7 couches (du plus général au plus spécifique) :

  1. Settings : Variables
  2. Tools : Mixins, fonctions
  3. Generic : Reset, normalize
  4. Elements : Balises HTML
  5. Objects : Layouts, conteneurs
  6. Components : Composants UI
  7. Utilities : Helpers

Structure :

css/
├── 01-settings/
├── 02-tools/
├── 03-generic/
├── 04-elements/
├── 05-objects/
├── 06-components/
└── 07-utilities/

Conventions de nommage​

Classes utilitaires :

.u-text-center { }
.u-margin-large { }
.u-hidden { }

Layout :

.l-container { }
.l-grid { }
.l-sidebar { }

Composants :

.c-card { }
.c-button { }
.c-modal { }

États :

.is-active { }
.is-hidden { }
.has-error { }

JavaScript hooks :

.js-modal-trigger { }
.js-dropdown { }

Organisation des fichiers​

Structure recommandée :

css/
├── abstracts/
│   ├── _variables.css
│   ├── _mixins.css
│   └── _functions.css
├── base/
│   ├── _reset.css
│   ├── _typography.css
│   └── _utilities.css
├── components/
│   ├── _buttons.css
│   ├── _cards.css
│   └── _forms.css
├── layout/
│   ├── _header.css
│   ├── _footer.css
│   └── _grid.css
└── main.css

main.css :

@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'base/reset';
@import 'base/typography';
@import 'layout/header';
@import 'components/buttons';
@import 'components/cards';

Bonnes pratiques​

1. Préfixes cohérents​

.l-*  /* Layout */
.c-*  /* Component */
.u-*  /* Utility */
.is-* /* State */
.js-* /* JavaScript hook */

2. Spécificité faible​

❌ Mauvais :

.container .card .title { }

✅ Bon :

.card__title { }

3. Pas de styles inline​

❌ Mauvais :

<div style="color: blue;">

✅ Bon :

<div class="text-blue">

4. Commentaires organisés​

/* ========================================
   COMPONENT: Card
   ======================================== */

.card { }

/* Element: Title */
.card__title { }

/* Modifier: Featured */
.card--featured { }

5. DRY (Don't Repeat Yourself)​

❌ Mauvais :

.button-primary {
    padding: 10px 20px;
    border-radius: 5px;
}

.button-secondary {
    padding: 10px 20px;
    border-radius: 5px;
}

✅ Bon :

.button {
    padding: 10px 20px;
    border-radius: 5px;
}

Exercices guidés​

Exercice 1 : BEM​

Créez un composant avec BEM :

  • Block : .card
  • Elements : .card__title, .card__body
  • Modifiers : .card--featured

Exercice 2 : SMACSS​

Organisez votre CSS en 5 catégories :

  • Base
  • Layout
  • Module
  • State
  • Theme

Exercice 3 : OOCSS​

Séparez structure et skin :

  • Classe de base (structure)
  • Classes de skin (apparence)

Exercice 4 : Organisation fichiers​

Créez une structure de fichiers :

  • Abstracts
  • Base
  • Components
  • Layout
  • Main file

Exercice 5 : Conventions​

Appliquez des conventions :

  • Préfixes cohérents
  • Nommage descriptif
  • Commentaires organisés

❌ Erreurs fréquentes​

Erreur 1 : Pas d'architecture​

❌ Mauvais :

/* Tout dans un fichier, pas d'organisation */

✅ Bon :

/* Organisé par catégories, fichiers séparés */

Pourquoi : Architecture = maintenabilité.

Erreur 2 : BEM mal utilisé​

❌ Mauvais :

.card-title { } /* Pas de __ */

✅ Bon :

.card__title { } /* BEM correct */

Pourquoi : BEM a des règles précises.

Erreur 3 : Spécificité trop élevée​

❌ Mauvais :

.container .card .title { }

✅ Bon :

.card__title { }

Pourquoi : Spécificité faible = plus facile à surcharger.

Erreur 4 : Duplication de code​

❌ Mauvais :

.button1 { padding: 10px; }
.button2 { padding: 10px; }

✅ Bon :

.button { padding: 10px; }

Pourquoi : DRY = moins de code, plus maintenable.

Erreur 5 : Pas de conventions​

❌ Mauvais :

/* Noms incohérents */
.cardTitle { }
.card_title { }
.card-title { }

✅ Bon :

/* Convention cohérente (BEM) */
.card__title { }

Pourquoi : Conventions = collaboration facilitée.

🚀 Mini-projet​

Mission : Réorganiser un projet CSS avec architecture

Prenez un projet existant et réorganisez-le :

Architecture :

  • Choisir BEM, SMACSS ou OOCSS
  • Organiser en fichiers
  • Appliquer les conventions

Structure :

  • Abstracts (variables, mixins)
  • Base (reset, typography)
  • Layout (header, footer, grid)
  • Components (cards, buttons, forms)
  • Utilities (helpers)

Critères :

  • ✅ Architecture choisie et appliquée
  • ✅ Fichiers organisés
  • ✅ Conventions cohérentes
  • ✅ Spécificité faible
  • ✅ Code DRY

Objectif : Créer une architecture CSS professionnelle et maintenable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'architecture CSS et avez organisé un projet avec une architecture claire.