Rappels essentiels de CSS

Syntaxe CSS de base

Une règle CSS est composée de deux éléments principaux :

• Un sélecteur qui cible les éléments HTML
• Un bloc de propriétés entre accolades

sélecteur {
  propriété: valeur;
  autre-propriété: autre-valeur;
}

Le navigateur lit le CSS de haut en bas et applique les règles en fonction de leur priorité et de leur spécificité.

Les sélecteurs essentiels

Les sélecteurs permettent de cibler précisément les éléments HTML auxquels appliquer les styles. Voici les trois types les plus courants :

/* Sélecteur de type (élément HTML) */
p {
  color: red;
}

/* Sélecteur de classe (le plus utilisé) */
.card {
  padding: 16px;
  background: white;
}

/* Sélecteur d'identifiant (à utiliser avec parcimonie) */
#header {
  background: black;
  color: white;
}

La cascade CSS

Le mot CSS signifie Cascading Style Sheets (feuilles de style en cascade). La cascade définit quelle règle gagne lorsqu'il y a conflit. L'ordre d'application suit trois principes :

• Importance (priorité des règles)
• Spécificité (précision du sélecteur)
• Ordre d'apparition (dernier arrivé, premier servi)

p {
  color: red;
}

p {
  color: blue;
}

Ici, le texte sera bleu car la seconde règle écrase la première (même spécificité, mais apparaît après).

Spécificité CSS

Lorsque plusieurs règles ciblent le même élément, la plus spécifique l'emporte. La spécificité se calcule selon un système de points :

• Sélecteur d'élément : 1 point
• Classe, pseudo-classe, attribut : 10 points
• Identifiant : 100 points
• Style inline : 1000 points

p {
  color: red; /* Spécificité: 1 */
}

.article p {
  color: green; /* Spécificité: 11 (10 + 1) */
}

#main .article p {
  color: blue; /* Spécificité: 111 (100 + 10 + 1) */
}

Le texte sera bleu, car #main .article p a la spécificité la plus élevée.

Héritage CSS

Certaines propriétés sont héritées automatiquement par les éléments enfants. Cela permet d'éviter la répétition :

body {
  color: white;
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
}

/* Tous les éléments enfants héritent de ces propriétés */
h1, h2, h3, p, a, span {
  /* Pas besoin de redéfinir couleur, police, interligne */
}

Les propriétés comme color, font-family, line-height et text-align sont héritées. D'autres comme margin, padding ou border ne le sont pas.

Le box model

Chaque élément HTML est une boîte composée de quatre couches :

• Contenu : le texte, l'image ou autre média
• Padding : espace interne entre le contenu et la bordure
• Border : la bordure visible
• Margin : espace externe entre cet élément et les autres

.card {
  width: 300px;           /* Largeur du contenu */
  padding: 16px;          /* Espace interne */
  border: 2px solid white;/* Bordure visible */
  margin: 20px;           /* Espace externe */
  background: #1e293b;
}

CSS propre avant SCSS

Voici un exemple de CSS simple mais structuré, prêt à être amélioré avec SCSS. C'est le type de code que tu peux produire avec des bases CSS solides :

/* Variables CSS natives (limitées) */
:root {
  --primary: #7aa7ff;
  --bg-dark: #0b1020;
  --text-light: #e9eeff;
}

/* Styles globaux */
body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  margin: 0;
  padding: 0;
}

/* Composant bouton */
.button {
  background: var(--primary);
  color: white;
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.button:hover {
  background: #5a8fff;
}

/* Variante de bouton */
.button.secondary {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

/* Composant carte */
.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin: 16px 0;
}

Ce type de structure deviendra beaucoup plus maintenable avec les variables et le nesting SCSS. Cependant, même sans SCSS, un CSS bien organisé est déjà puissant.

Bonnes pratiques fondamentales

• Utiliser principalement des classes pour la flexibilité et la réutilisabilité.
• Limiter la spécificité : préférer .button à #header .nav ul li .button.
• Comprendre la cascade avant d'utiliser SCSS pour éviter les conflits.
• Éviter !important autant que possible ; c'est souvent un signe de mauvaise architecture.
• Organiser le CSS par composants ou par fonctionnalité.
• Utiliser des noms de classes descriptifs (BEM, SMACSS, etc.).

Erreur 1 : utiliser SCSS pour masquer un mauvais CSS

SCSS ne corrige pas un mauvais usage des sélecteurs ou une mauvaise compréhension de la cascade. Au contraire, il peut amplifier les problèmes si les bases CSS ne sont pas solides.

Erreur 2 : abuser de !important

!important casse la logique de la cascade et rend le débogage difficile. SCSS n'est pas une excuse pour l'utiliser davantage. Si tu ressens le besoin d'utiliser !important, c'est souvent que ta spécificité est trop élevée ou ton architecture à revoir.

Erreur 3 : négliger les bases avant de passer à SCSS

Beaucoup de développeurs veulent sauter directement à SCSS sans maîtriser CSS. C'est une erreur : SCSS génère du CSS, et si tu ne comprends pas le résultat, tu ne pourras pas débuguer efficacement.