Aller au contenu principal

Module SCSS.5 – Architecture SCSS

Objectif​

Maîtriser l'architecture SCSS : pattern 7-1, organisation des fichiers, scalabilité pour créer des projets SCSS professionnels et maintenables.

Théorie​

Pattern 7-1​

7-1 Pattern = 7 dossiers, 1 fichier principal.

Structure :

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _functions.scss
│   ├── _mixins.scss
│   └── _placeholders.scss
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _utilities.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   ├── _forms.scss
│   └── ...
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _navigation.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   ├── _about.scss
│   └── ...
├── themes/
│   ├── _theme.scss
│   └── _admin.scss
├── vendors/
│   ├── _bootstrap.scss
│   └── _normalize.scss
└── main.scss

Abstracts (Variables, fonctions, mixins)​

Rôle : Outils et helpers, pas de CSS compilé.

Fichiers :

// abstracts/_variables.scss
$primary-color: #007bff;
$spacing: 1rem;

// abstracts/_functions.scss
@function rem($pixels) {
    @return ($pixels / 16) * 1rem;
}

// abstracts/_mixins.scss
@mixin button($color) {
    // ...
}

// abstracts/_placeholders.scss
%button-base {
    // ...
}

Base (Reset, typography, utilities)​

Rôle : Styles de base, normalisation.

Fichiers :

// base/_reset.scss
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// base/_typography.scss
body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

// base/_utilities.scss
.text-center {
    text-align: center;
}

Components (Composants UI)​

Rôle : Composants réutilisables.

Fichiers :

// components/_buttons.scss
.button {
    // ...
}

// components/_cards.scss
.card {
    // ...
}

// components/_forms.scss
.input {
    // ...
}

Organisation :

  • Un fichier par composant
  • Ou groupe de composants similaires

Layout (Structure de page)​

Rôle : Layouts, grilles, structure.

Fichiers :

// layout/_header.scss
.header {
    // ...
}

// layout/_footer.scss
.footer {
    // ...
}

// layout/_grid.scss
.container {
    display: grid;
    // ...
}

Pages (Styles spécifiques)​

Rôle : Styles spécifiques à une page.

Fichiers :

// pages/_home.scss
.home-hero {
    // Styles spécifiques à la page d'accueil
}

// pages/_about.scss
.about-team {
    // Styles spécifiques à la page about
}

⚠️ Attention : Utiliser avec parcimonie, préférer les composants.

Themes (Thèmes)​

Rôle : Variations de thème.

Fichiers :

// themes/_theme.scss
.theme-dark {
    --bg-color: black;
    --text-color: white;
}

// themes/_admin.scss
.admin-panel {
    // Styles admin
}

Vendors (Bibliothèques tierces)​

Rôle : Styles de bibliothèques externes.

Fichiers :

// vendors/_bootstrap.scss
// Override Bootstrap si nécessaire

// vendors/_normalize.scss
@import 'normalize.css';

Main.scss (Point d'entrée)​

Fichier principal qui importe tout :

// main.scss

// 1. Abstracts (pas de CSS généré)
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

// 2. Vendors (bibliothèques tierces)
@import 'vendors/normalize';

// 3. Base (styles de base)
@import 'base/reset';
@import 'base/typography';
@import 'base/utilities';

// 4. Layout (structure)
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';

// 5. Components (composants)
@import 'components/buttons';
@import 'components/cards';
@import 'components/forms';

// 6. Pages (styles spécifiques)
@import 'pages/home';
@import 'pages/about';

// 7. Themes (thèmes)
@import 'themes/theme';

Ordre important : Respecter l'ordre pour éviter les problèmes de dépendances.

Scalabilité​

Pour petits projets :

scss/
├── _variables.scss
├── _mixins.scss
├── _base.scss
├── _components.scss
└── main.scss

Pour projets moyens :

scss/
├── abstracts/
├── base/
├── components/
└── main.scss

Pour grands projets :

scss/
├── abstracts/
├── base/
├── components/
│   ├── buttons/
│   ├── cards/
│   └── forms/
├── layout/
├── pages/
├── themes/
└── main.scss

Bonnes pratiques​

1. Nommage cohérent​

Fichiers :

  • Préfixe _ pour partials
  • Kebab-case : _button-primary.scss

Classes :

  • BEM : .button, .button__icon, .button--primary

2. Un composant = un fichier​

✅ Bon :

components/
├── _buttons.scss
├── _cards.scss
└── _forms.scss

❌ Mauvais :

components/
└── _all.scss (tout mélangé)

3. Imports dans le bon ordre​

Ordre :

  1. Abstracts (variables, fonctions, mixins)
  2. Vendors
  3. Base
  4. Layout
  5. Components
  6. Pages
  7. Themes

4. Éviter les imports circulaires​

❌ Mauvais :

// _a.scss
@import 'b';

// _b.scss
@import 'a'; // Circulaire !

5. Commentaires organisés​

/* ========================================
   COMPONENT: Button
   ======================================== */

.button {
    // ...
}

Exercices guidés​

Exercice 1 : Structure 7-1​

Créez la structure 7-1 :

  • Tous les dossiers
  • Fichiers de base dans chaque dossier
  • main.scss avec imports

Exercice 2 : Organiser un projet​

Prenez un projet existant :

  • Organisez-le selon 7-1
  • Séparez les partials
  • Créez main.scss

Exercice 3 : Scalabilité​

Adaptez la structure :

  • Petit projet (structure simple)
  • Grand projet (structure complète)
  • Comprenez quand utiliser quoi

Exercice 4 : Imports​

Créez main.scss :

  • Imports dans le bon ordre
  • Testez la compilation
  • Vérifiez les dépendances

Exercice 5 : Documentation​

Documentez votre structure :

  • Commentaires dans main.scss
  • README pour expliquer l'organisation
  • Guide pour nouveaux développeurs

❌ Erreurs fréquentes​

Erreur 1 : Pas d'organisation​

❌ Mauvais :

scss/
└── styles.scss (5000 lignes)

✅ Bon :

scss/
├── abstracts/
├── base/
├── components/
└── main.scss

Pourquoi : Organisation = maintenabilité.

Erreur 2 : Imports dans le mauvais ordre​

❌ Mauvais :

@import 'components'; // Utilise $primary-color
@import 'abstracts/variables'; // Définit $primary-color (trop tard)

✅ Bon :

@import 'abstracts/variables'; // Définit d'abord
@import 'components'; // Utilise ensuite

Pourquoi : Dépendances doivent être résolues.

Erreur 3 : Tout dans components​

❌ Mauvais :

components/
└── _all.scss (tout mélangé)

✅ Bon :

components/
├── _buttons.scss
├── _cards.scss
└── _forms.scss

Pourquoi : Séparation = maintenabilité.

Erreur 4 : Oublier le _ pour partials​

❌ Mauvais :

variables.scss (compilé seul)

✅ Bon :

_variables.scss (partial, pas compilé seul)

Pourquoi : _ = partial, pas compilé seul.

Erreur 5 : Structure trop complexe pour petit projet​

❌ Mauvais :

// 7-1 pattern pour 3 pages simples

✅ Bon :

// Structure simple pour petit projet
// 7-1 pour grand projet

Pourquoi : Adapter la structure à la taille du projet.

🚀 Mini-projet​

Mission : Créer une architecture SCSS professionnelle

Créez un projet avec structure 7-1 :

Structure complète :

  • Abstracts (variables, functions, mixins, placeholders)
  • Base (reset, typography, utilities)
  • Layout (header, footer, grid)
  • Components (buttons, cards, forms)
  • Pages (home, about)
  • Themes (theme)
  • Main.scss organisé

Organisation :

  • Un fichier par composant
  • Imports dans le bon ordre
  • Commentaires organisés
  • Documentation

Critères :

  • ✅ Structure 7-1 complète
  • ✅ Partials bien organisés
  • ✅ Imports dans le bon ordre
  • ✅ Scalable
  • ✅ Documentation claire

Objectif : Créer une architecture SCSS professionnelle et scalable.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'architecture SCSS et avez créé une structure 7-1 organisée.