🎨 CSS & SCSS – Le Guide Ultime

CSS signifie Cascading Style Sheets (Feuilles de Style en Cascade). C'est le langage qui décrit *comment* les éléments HTML doivent être affichés à l'écran, sur papier, ou dans d'autres médias.

L'Analogie du Bâtiment

Pensez à un site web comme à la construction d'un bâtiment :

Exemple : Avant et Après CSS

Sans CSS, le web est "nu" et (franchement) très moche. C'est juste du texte noir sur fond blanc avec des liens bleus.

<h1>Mon Titre</h1>
<p>Ceci est un paragraphe.</p>
<button>Cliquez ici</button>

<!-- Dans le fichier .css -->
h1 {
  color: #38bdf8;
  font-family: 'Arial', sans-serif;
}
button {
  background-color: #38bdf8;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

La syntaxe de base du CSS est une "règle". Une règle est composée d'un **sélecteur** et d'un **bloc de déclaration**.

   sélecteur {
     propriété: valeur;  /* <-- Ceci est une "déclaration" */
     font-size: 16px;
   }
   
   p {
     color: blue;
   }

Le **sélecteur** est la partie la plus importante : c'est lui qui dit "à quel(s) élément(s) HTML cette règle s'applique".

Sélecteurs les plus courants

Combinaisons (le "sélecteur de descendant")

/* Cible TOUS les 'a' DANS 'nav' */
nav a {
  color: green;
}

/* Cible 'p' qui est un ENFANT DIRECT de 'div' */
div > p {
  font-weight: bold;
}

/* Cible 'span' qui est le FRÈRE IMMÉDIAT de 'h2' */
h2 + span {
  font-style: italic;
}

/* Cible un 'a' avec la classe 'link' ET l'état 'hover' */
a.link:hover {
  text-decoration: underline;
}

C'est le concept le plus fondamental et le plus difficile de CSS. "Cascade" signifie que les styles "coulent" (comme une cascade) et que des conflits *vont* arriver.
Conflit : Que se passe-t-il si un <p> est ciblé par p { color: blue; } ET .text { color: red; } ?

Le navigateur utilise un algorithme en 3 étapes pour résoudre les conflits :

1. Origine & Importance

L'ordre de priorité (du moins au plus important) :
1. Styles du Navigateur (User-agent) (ex: le bleu par défaut des liens).
2. Styles de l'Utilisateur (ex: si l'utilisateur a forcé une police plus grande pour l'accessibilité).
3. Styles de l'Auteur (Votre fichier CSS).
4. L' "A-Bomb" : !important. Un color: red !important; dans votre CSS bat tout... sauf un !important de l'utilisateur.

Règle : N'utilisez JAMAIS !important, sauf en dernier recours absolu. C'est un signe que votre CSS est mal structuré.

2. Spécificité (Le "Score" du Sélecteur)

Si deux règles ont la même "Origine", le navigateur calcule leur "Spécificité". C'est un score (pensez 0,0,0,0).

Exemple de calcul de conflit :

/* HTML: <a id="mon-lien" class="link" href="#">Lien</a> */

a { color: blue; }             /* Spécificité: 0,0,0,1 (1) */
.link { color: green; }         /* Spécificité: 0,0,1,0 (10) */
#mon-lien { color: red; }       /* Spécificité: 0,1,0,0 (100) */
a.link[href="#"] { color: purple; } /* Spécificité: 0,0,2,1 (21) */

/*
  GAGNANT : #mon-lien (100)
  Le lien sera ROUGE.
*/

3. Ordre du Code (Source Order)

Si deux règles ont la même spécificité, la dernière règle déclarée dans le fichier CSS l'emporte.

.texte { color: blue; }
.texte { color: red; } /* GAGNE (même score, mais déclaré en dernier) */

En CSS, **chaque élément** (div, p, span...) est une boîte rectangulaire. Le "Box Model" décrit comment cette boîte est construite.

Les 4 Couches (de l'intérieur vers l'extérieur)

1. Content (Contenu) : Là où se trouve votre texte ou votre image. (Défini par width et height).
2. Padding (Rembourrage) : L'espace *entre* le contenu et la bordure. C'est "l'intérieur" de la boîte. (Transparent, prend la couleur de fond).
3. Border (Bordure) : La ligne qui entoure le padding et le contenu.
4. Margin (Marge) : L'espace *à l'extérieur* de la bordure. C'est ce qui "pousse" les autres boîtes. (Toujours transparent).

.ma-boite {
  /* 1. Contenu */
  width: 300px;
  height: 100px;
  background-color: #0f172a; /* S'applique au content + padding */

  /* 2. Padding (10px en haut/bas, 20px à gauche/droite) */
  padding: 10px 20px;
  
  /* 3. Bordure */
  border: 2px solid #38bdf8;
  
  /* 4. Marge (pousse les autres éléments) */
  margin: 15px;
}

Le "Gotcha" : `box-sizing: border-box` (La Règle d'Or)

Par défaut (box-sizing: content-box), le width que vous définissez ne s'applique *qu'au contenu*.
Problème : Largeur totale = width + padding-left + padding-right + border-left + border-right.
Dans notre exemple : 300px + 20px + 20px + 2px + 2px = 344px de large. C'est un cauchemar à calculer.

LA SOLUTION : On utilise box-sizing: border-box. Cela dit au navigateur : "Le width: 300px que je te donne inclut le padding et la bordure !". Le contenu va s'adapter (rétrécir) pour que la boîte fasse *exactement* 300px de large.

Mettez TOUJOURS ce code au début de votre CSS :

*,
*::before,
*::after {
  box-sizing: border-box;
}

Partie 1 : La propriété display

La propriété display définit le "comportement social" d'une boîte : comment elle interagit avec ses frères et si elle respecte les dimensions.

Partie 2 : La propriété position

La propriété position définit comment un élément est "sorti" du flux normal. Elle s'utilise avec top, right, bottom, left.

Flexbox (Flexible Box Layout) est un modèle de layout conçu pour l'alignement et la distribution d'espace entre des éléments dans un conteneur. C'est l'outil n°1 pour le layout 1 Dimensionnel (soit une ligne, soit une colonne).

Avant Flexbox, centrer un <div> verticalement était un cauchemar. Maintenant, c'est 3 lignes.

Le Concept : Parent (Container) & Enfants (Items)

On active Flexbox sur le *parent* (le conteneur) :

.container {
  display: flex;
}

Propriétés du Parent (Container)

Propriétés des Enfants (Items)

Exemple : Centrer un DIV parfaitement

.parent {
  display: flex;
  justify-content: center; /* Centre sur l'axe principal (horizontal) */
  align-items: center;     /* Centre sur l'axe secondaire (vertical) */
  height: 100vh;
}
.enfant {
  /* ... n'a besoin de rien de spécial */
}

Grid est le second modèle de layout moderne. Si Flexbox est pour 1D (une ligne *ou* une colonne), Grid est pour 2 Dimensions (lignes *et* colonnes en même temps). C'est l'outil ultime pour le "zoning" (layout de page : header, sidebar, content, footer).

Le Concept : Une grille de "pistes" (tracks)

On active Grid sur le *parent* (le conteneur) et on définit les colonnes et les lignes :

Propriétés du Parent (Container)

L'unité fr (fraction) est la magie de Grid. Elle représente "une fraction de l'espace libre restant". 1fr 1fr 1fr signifie "divise l'espace en 3 colonnes égales".

Méthode 1 : Placer les Enfants (Items) par "lignes"

.item-1 {
  /* Commence à la ligne de grille 1 */
  grid-column-start: 1;
  /* Termine AVANT la ligne de grille 3 (donc s'étend sur 2 colonnes) */
  grid-column-end: 3;
  
  /* Raccourci : */
  grid-column: 1 / 3;
}
.item-2 {
  grid-row: 2 / 4; /* S'étend sur 2 lignes */
}

Méthode 2 : Placer par "Noms de Zone" (grid-template-areas)

C'est la méthode la plus visuelle et la plus simple pour les layouts de page.

/* 1. Sur le PARENT */
.container {
  display: grid;
  /* Définit les colonnes */
  grid-template-columns: 200px 1fr;
  /* Définit les lignes ET nomme les zones (regardez l'ASCII art !) */
  grid-template-areas:
    "header header"  /* Ligne 1: header prend les 2 cols */
    "sidebar main"   /* Ligne 2: sidebar(200px) et main(1fr) */
    "footer  footer"; /* Ligne 3: footer prend les 2 cols */
}

/* 2. Sur les ENFANTS */
.header {
  grid-area: header; /* Dit à cet enfant de se placer dans la zone "header" */
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Partie 1 : Responsive Design (Media Queries)

Le Responsive Design est la pratique de s'assurer qu'un site s'affiche correctement sur *toutes* les tailles d'écran (mobile, tablette, bureau). L'outil principal pour cela est la Media Query (@media).

L'Approche "Mobile First" (Mobile en Premier)

C'est la meilleure pratique. On écrit d'abord les styles pour l'écran le plus *petit* (mobile). Ensuite, on utilise des media queries (min-width: ...) ("à partir de cette largeur...") pour *ajouter* des styles pour les écrans plus grands.

/* 1. Styles par défaut (Mobile) */
.container {
  display: flex;
  flex-direction: column; /* S'empile verticalement sur mobile */
}
.sidebar {
  width: 100%; /* Prend toute la largeur */
}
.main-content {
  width: 100%;
}

/* 2. Styles pour "Tablette" et plus grand */
/* Quand l'écran fait AU MOINS 768px de large... */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* ...on passe en mode horizontal */
  }
  .sidebar {
    width: 250px; /* ...on fixe la largeur du sidebar */
  }
  .main-content {
    flex-grow: 1; /* ...on laisse le contenu prendre le reste */
  }
}

/* 3. Styles pour "Desktop" et plus grand */
@media (min-width: 1024px) {
  .container {
    width: 980px; /* ...on fixe la largeur max du site */
    margin: 0 auto; /* ...et on le centre */
  }
}

Partie 2 : Variables CSS (Custom Properties)

Le CSS moderne (natif, pas besoin de SCSS) permet de créer des variables. C'est extrêmement puissant pour la maintenance et le "theming" (ex: mode sombre).

/* 1. Déclaration (souvent sur :root, qui est la balise <html>) */
:root {
  --main-color: #38bdf8;  /* Nom commence par -- */
  --text-color: #333;
  --base-font-size: 16px;
}

/* 2. Utilisation (avec la fonction var()) */
body {
  color: var(--text-color);
  font-size: var(--base-font-size);
}

.button-primary {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

/* 3. Redéfinition (ex: pour un "Mode Sombre") */
@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #0ea5e9; /* Un peu plus clair */
    --text-color: #e2e8f0; /* Texte clair */
    background-color: #0f172a; /* Fond sombre */
  }
}

SCSS (Sassy CSS) est la syntaxe la plus populaire de Sass. C'est un pré-processeur CSS.
En clair : c'est du CSS avec des super-pouvoirs (variables, fonctions, imbrication...) que le navigateur ne comprend pas.

Le Processus : Compilation

Vous écrivez votre code dans un fichier .scss. Ensuite, un outil (un "compilateur", ex: node-sass) lit votre fichier .scss et le **compile** en un fichier .css normal, que le navigateur peut comprendre.
Fichier style.scss (Ce que vous écrivez) -> COMPILATION -> Fichier style.css (Ce que le navigateur lit)

Pourquoi s'embêter ? (Les 3 Avantages Clés)

1. Ne pas se répéter (DRY) : Grâce aux Variables ($) et aux Mixins (@mixin), vous ne copiez/collez plus jamais de code.
2. Organisation : Grâce à l'Imbrication (Nesting), votre code HTML et votre code SCSS ont la même structure visuelle.
3. Maintenabilité : Grâce aux Partials (_), vous pouvez découper votre énorme fichier CSS en 20 petits fichiers (_buttons.scss, _header.scss...).

Exemple (La magie du "Nesting")

.navbar {
  background: #333;
}
.navbar ul {
  list-style: none;
  padding: 0;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  color: white;
  text-decoration: none;
}
.navbar ul li a:hover {
  color: #38bdf8;
}

.navbar {
  background: #333;
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        text-decoration: none;
        
        /* Le '&' fait référence au parent (a) */
        &:hover {
          color: #38bdf8;
        }
      }
    }
  }
}

1. Variables ($)

Permet de stocker des valeurs (couleurs, polices, tailles).
Note : Différent des variables CSS natives (--var) car elles sont "compilées" (statiques).

$primary-color: #38bdf8;
$base-padding: 1rem;

.button {
  background-color: $primary-color;
  padding: $base-padding;
}

2. Nesting (Imbrication)

Permet d'imbriquer les sélecteurs pour suivre la structure HTML (voir 9.1). Le & est un sélecteur spécial qui fait référence au parent immédiat.

.card {
  /* ...styles de .card... */
  
  /* Cible .card__title */
  &__title {
    font-size: 1.5rem;
  }
  
  /* Cible .card:hover */
  &:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
  }
  
  /* Cible .card.is-active */
  &.is-active {
    border: 1px solid $primary-color;
  }
}

3. Mixins (@mixin / @include)

Un "Mixin" est un bloc de CSS réutilisable, comme une "fonction" qui ne renvoie rien. Parfait pour les blocs répétitifs (Flexbox, ...).

/* 1. Définir le mixin (souvent avec arguments) */
@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

/* 2. L'utiliser */
.hero {
  @include flex-center(column); /* Appelle avec l'arg "column" */
  height: 100vh;
}

.icon-bar {
  @include flex-center; /* Appelle avec le "row" par défaut */
}

4. Extend (@extend)

Permet de "partager" (hériter) des styles d'un autre sélecteur. C'est puissant, mais peut être dangereux.

/* Style de base (souvent avec un '%', placeholder) */
%button-base {
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
}

.button-primary {
  @extend %button-base; /* Hérite de %button-base */
  background: blue;
  color: white;
}
.button-secondary {
  @extend %button-base; /* Hérite de %button-base */
  background: grey;
  color: black;
}

/* CSS Compilé (regroupe les sélecteurs) : */
.button-primary, .button-secondary {
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: bold;
}
.button-primary { ... }
.button-secondary { ... }

1. Partials (_) & Import

Pour éviter d'avoir un fichier .scss de 5000 lignes, on le "découpe" en "Partials" (partiels).
Un partial est un fichier SCSS dont le nom commence par un underscore (_), ex: _variables.scss, _buttons.scss.
L'underscore dit au compilateur : "Ne compile pas ce fichier tout seul, il est fait pour être importé".

On les assemble dans un fichier "maître" (ex: main.scss).

Ancienne méthode : @import (À ne plus utiliser)

/* main.scss */
@import 'variables'; /* Importe _variables.scss */
@import 'buttons';   /* Importe _buttons.scss */
/* Problème : tout est global, 'variables' peut écraser 'buttons' */

Nouvelle méthode (Moderne) : @use & @forward

@use est le nouvel @import. Il est bien meilleur car il est "namespacé".

/* _variables.scss */
$primary-color: blue;

/* main.scss */
@use 'variables'; /* Charge _variables.scss */
@use 'buttons';   /* Charge _buttons.scss */

.element {
  /* On doit utiliser le nom du fichier (namespace) ! */
  color: variables.$primary-color;
  
  /* On peut le renommer : @use 'variables' as v; */
  /* color: v.$primary-color; */
}

2. Fonctions (@function)

Similaire à un @mixin, mais une fonction retourne une valeur (un nombre, une couleur, un string) au lieu d'un bloc de CSS.

/* Définit une fonction qui convertit les pixels en rem */
@function px-to-rem($pixels) {
  @return ($pixels / 16) + rem;
}

.element {
  font-size: px-to-rem(24); /* Appel de la fonction */
}

/* CSS Compilé : */
.element {
  font-size: 1.5rem;
}

3. Boucles (@for)

Permet de générer du CSS programmatiquement. Parfait pour les grilles ou les classes utilitaires.

/* Génère des classes .col-1, .col-2 ... .col-12 */
@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

/* CSS Compilé (extrait) : */
.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
/* ... etc ... */

Écrire du CSS/SCSS "vanilla" (pur) c'est bien, mais l'écosystème d'outils est ce qui rend le développement front-end moderne et efficace.

1. Méthodologies (Comment "penser" le CSS)

2. Frameworks (Bootstrap vs Tailwind)

Ne pas réinventer la roue pour chaque projet.

3. Post-processeurs (ex: PostCSS)

Un "post-processeur" est un outil qui prend votre CSS *compilé* et le transforme (souvent avec des plugins).

• Autoprefixer : Le plugin le plus important. Il lit votre CSS (ex: display: flex) et ajoute *automatiquement* les préfixes vendeurs (-webkit-box, -ms-flexbox) pour la compatibilité avec les anciens navigateurs.

4. Linters (Qualité de code)

• Stylelint : Un outil qui lit votre CSS/SCSS et vous "crie dessus" (erreurs) si vous ne respectez pas les règles (ex: "Utilise #333 au lieu de #333333", "Ordre des propriétés alphabétique"). Indispensable en équipe.

Références Extérieures (Liens)