Module SCSS.8 – Bonnes pratiques
Objectif
Appliquer les bonnes pratiques SCSS : lisibilité, performance, anti-patterns pour créer du SCSS professionnel et maintenable.
Théorie
Lisibilité
1. Indentation cohérente
✅ Bon :
.nav {
ul {
li {
a {
color: blue;
}
}
}
}
❌ Mauvais :
.nav {
ul {
li {
a { color: blue; }
}
}
}
2. Espacement
✅ Bon :
.button {
padding: 10px 20px;
background-color: blue;
color: white;
}
❌ Mauvais :
.button{padding:10px 20px;background-color:blue;color:white}
3. Commentaires organisés
✅ Bon :
/* ========================================
COMPONENT: Button
======================================== */
.button {
// Base styles
padding: 10px 20px;
// Modifiers
&--primary {
background-color: blue;
}
}
4. Nommage descriptif
✅ Bon :
$primary-color: #007bff;
$spacing-large: 2rem;
❌ Mauvais :
$color1: #007bff;
$sp1: 2rem;
Performance
1. Éviter le nesting profond
❌ Mauvais :
.nav {
ul {
li {
a {
span {
strong { } // Trop profond
}
}
}
}
}
✅ Bon :
.nav {
ul {
list-style: none;
}
a {
color: blue;
}
}
Règle : Maximum 3-4 niveaux de nesting.
2. Optimiser les imports
❌ Mauvais :
@import 'variables';
@import 'variables'; // Dupliqué
@import 'mixins';
@import 'variables'; // Encore
✅ Bon :
@import 'variables';
@import 'mixins';
3. Utiliser @extend avec parcimonie
Quand utiliser :
- Styles communs fixes
- Optimisation importante
Quand éviter :
- Styles avec paramètres (utiliser mixin)
- Dans media queries
4. Éviter les calculs complexes
❌ Mauvais :
width: (100% - 20px - 10px) / 3 + 5px;
✅ Bon :
$total: 100%;
$spacing: 30px;
$columns: 3;
width: ($total - $spacing) / $columns;
Anti-patterns
1. Nesting excessif
❌ Mauvais :
.container {
.row {
.col {
.card {
.card-body {
.card-title { } // 6 niveaux !
}
}
}
}
}
✅ Bon :
.card {
&__body {
// ...
}
&__title {
// ...
}
}
2. Variables non utilisées
❌ Mauvais :
$unused-color: #ff0000;
$another-unused: 10px;
✅ Bon :
// Supprimer les variables non utilisées
3. Mixins trop génériques
❌ Mauvais :
@mixin everything {
// 100 lignes de code
}
✅ Bon :
@mixin button-base {
// Styles de base bouton
}
@mixin card-base {
// Styles de base carte
}
4. Imports circulaires
❌ Mauvais :
// _a.scss
@import 'b';
// _b.scss
@import 'a'; // Circulaire !
✅ Bon :
// _a.scss
// Pas d'import de b
// _b.scss
@import 'a'; // OK si a n'importe pas b
5. Code dupliqué
❌ Mauvais :
.button-primary {
padding: 10px 20px;
border-radius: 5px;
}
.button-secondary {
padding: 10px 20px;
border-radius: 5px;
}
✅ Bon :
%button-base {
padding: 10px 20px;
border-radius: 5px;
}
.button-primary {
@extend %button-base;
}
Organisation du code
1. Ordre logique
.element {
// 1. Position
position: relative;
// 2. Box Model
width: 100%;
padding: 20px;
margin: 10px;
// 3. Typography
font-size: 1rem;
color: blue;
// 4. Visual
background-color: white;
border: 1px solid gray;
// 5. Misc
cursor: pointer;
}
2. Groupement logique
.button {
// Base
padding: 10px 20px;
// States
&:hover { }
&:active { }
&:disabled { }
// Modifiers
&--primary { }
&--large { }
}
3. Séparation des responsabilités
✅ Bon :
// _variables.scss : Variables uniquement
// _mixins.scss : Mixins uniquement
// _buttons.scss : Styles boutons uniquement
Documentation
Commentaires utiles
/**
* Button component
*
* @param {Color} $bg-color - Background color
* @param {Color} $text-color - Text color (default: white)
*/
@mixin button($bg-color, $text-color: white) {
// ...
}
README pour le projet
# Structure SCSS
## Organisation
- abstracts/ : Variables, functions, mixins
- base/ : Reset, typography
- components/ : Composants UI
- layout/ : Structure de page
## Compilation
npm run sass:watch
Exercices guidés
Exercice 1 : Refactoriser le nesting
Prenez du code avec nesting profond :
- Réduisez à 3 niveaux max
- Utilisez BEM si nécessaire
- Améliorez la lisibilité
Exercice 2 : Optimiser les imports
Organisez les imports :
- Supprimez les doublons
- Organisez par ordre logique
- Vérifiez les dépendances
Exercice 3 : Éliminer la duplication
Identifiez le code dupliqué :
- Créez des mixins/placeholders
- Réutilisez le code
- Vérifiez le CSS généré
Exercice 4 : Documentation
Documentez votre code :
- Commentaires organisés
- README pour la structure
- Guide d'utilisation
Exercice 5 : Audit de code
Faites un audit :
- Identifiez les anti-patterns
- Corrigez les problèmes
- Optimisez la performance
❌ Erreurs fréquentes
Erreur 1 : Nesting trop profond
❌ Mauvais :
.a { .b { .c { .d { .e { } } } }
✅ Bon :
.a { }
.b { }
.c { }
Pourquoi : Nesting profond = CSS trop spécifique.
Erreur 2 : Code dupliqué
❌ Mauvais :
.button1 { padding: 10px; }
.button2 { padding: 10px; }
✅ Bon :
%base { padding: 10px; }
.button1 { @extend %base; }
.button2 { @extend %base; }
Pourquoi : DRY = maintenabilité.
Erreur 3 : Variables mal nommées
❌ Mauvais :
$c1: blue;
$s1: 10px;
✅ Bon :
$primary-color: blue;
$spacing-small: 10px;
Pourquoi : Nommage descriptif = compréhension.
Erreur 4 : Pas d'organisation
❌ Mauvais :
// Tout mélangé dans un fichier
✅ Bon :
// Organisé en partials, structure claire
Pourquoi : Organisation = maintenabilité.
Erreur 5 : Imports désordonnés
❌ Mauvais :
@import 'components';
@import 'variables'; // Trop tard
✅ Bon :
@import 'variables'; // D'abord
@import 'components'; // Ensuite
Pourquoi : Ordre = résolution des dépendances.
🚀 Mini-projet
Mission : Refactoriser un projet SCSS selon les bonnes pratiques
Prenez un projet SCSS et améliorez-le :
Améliorations :
- Réduire le nesting (max 3 niveaux)
- Éliminer la duplication (mixins/placeholders)
- Organiser les imports
- Améliorer la documentation
- Optimiser la performance
Critères :
- ✅ Nesting approprié
- ✅ Code DRY
- ✅ Organisation claire
- ✅ Documentation complète
- ✅ Performance optimisée
Objectif : Créer du SCSS professionnel selon les bonnes pratiques.
Validation : Vous pouvez passer au module suivant quand vous appliquez les bonnes pratiques SCSS et avez un code professionnel et maintenable.