Chapitre 1 : Introduction à css

Vue d'ensemble de css : philosophie, cas d'usage, écosystème et positionnement.

Vue d'ensemble du CSS

1. Quoi

Le CSS (Cascading Style Sheets ou Feuilles de Style en Cascade) est un langage de style utilisé pour décrire la présentation d'un document écrit en HTML ou en XML. Contrairement au HTML qui définit la structure (le "quoi"), le CSS définit l'apparence (le "comment").

La philosophie fondamentale du CSS repose sur la séparation des préoccupations (Separation of Concerns). L'idée est de maintenir le contenu sémantique totalement indépendant de sa mise en forme. Cela permet, par exemple, de modifier l'intégralité du design d'un site web en changeant un seul fichier CSS, sans toucher à une seule ligne de code HTML.

Le terme "Cascade" fait référence à l'algorithme que le navigateur utilise pour décider quelle règle de style appliquer lorsqu'il y a plusieurs instructions contradictoires pour un même élément. Cette cascade prend en compte la provenance du style, la spécificité du sélecteur et l'ordre d'apparition.

2. Pourquoi

Dans un contexte professionnel, le CSS est indispensable pour plusieurs raisons critiques :

• Expérience Utilisateur (UX) : Un site sans CSS est une simple liste de textes et de liens. Le CSS permet de créer des interfaces intuitives, aérées et agréables à utiliser.
• Identité Visuelle (Branding) : C'est l'outil principal pour appliquer la charte graphique d'une entreprise (couleurs, typographies, espacements).
• Adaptabilité (Responsive Design) : Grâce aux Media Queries, le CSS permet d'adapter l'affichage selon la taille de l'écran (smartphone, tablette, desktop), garantissant que le site reste utilisable partout.
• Accessibilité (a11y) : Le CSS permet de gérer les contrastes de couleurs et les indicateurs visuels pour les utilisateurs malvoyants ou utilisant des lecteurs d'écran.
• Performance : En séparant le style du contenu, on réduit la répétition de code. Le navigateur peut mettre en cache le fichier CSS, ce qui accélère le chargement des pages suivantes.

3. Comment

A. Syntaxe de base

Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration.

/* Sélecteur { Propriété: Valeur; } */
p {
  color: blue;
  font-size: 16px;
}

• Sélecteur : Cible l'élément HTML à styliser (ici, tous les paragraphes <p>).
• Propriété : L'aspect que l'on souhaite modifier (ex: color).
• Valeur : Le réglage appliqué à la propriété (ex: blue).

B. Cibler des éléments précis : classe et ID

La syntaxe de base avec un sélecteur de balise (p, h1…) cible tous les éléments de ce type dans la page. En pratique, on a besoin de cibler des éléments spécifiques. Deux notations permettent cela.

Le sélecteur de classe (.)

<article class="user-card">...</article>
<article class="user-card">...</article>

.user-card {
  background-color: white;
  border-radius: 8px;
}

• S'écrit avec un point (.) suivi du nom de la classe.
• Peut s'appliquer à plusieurs éléments simultanément.
• Un élément peut porter plusieurs classes : class="user-card user-card--featured".
• C'est la notation privilégiée pour tout le stylage.

Le sélecteur d'ID (#)

<nav id="main-navigation">...</nav>

#main-navigation {
  position: sticky;
  top: 0;
}

• S'écrit avec un dièse (#) suivi de l'identifiant.
• Un ID doit être unique dans la page entière (règle HTML).
• Sa spécificité est très élevée, ce qui rend les surcharges difficiles.
• En CSS, son usage est à limiter. Il est surtout utile pour les ancres (<a href="#section">) et les scripts JavaScript.

C. Nommer ses classes : le pattern BEM

Avec des dizaines de composants sur une page, les noms de classes peuvent vite devenir confus. BEM (Block Element Modifier) est une convention de nommage largement adoptée dans l'industrie pour résoudre ce problème.

Concept	Rôle	Syntaxe	Exemple
Block	Composant autonome et réutilisable	.block	.user-card
Element	Partie interne d'un block, sans sens propre hors du block	.block__element	.user-card__avatar
Modifier	Variante ou état d'un block ou d'un élément	.block--modifier	.user-card--featured

<!-- Block -->
<article class="user-card user-card--featured">

  <!-- Elements -->
  <img class="user-card__avatar" />
  <h2 class="user-card__name">Jean Dupont</h2>

  <!-- Element + Modifier -->
  <button class="user-card__button user-card__button--primary">
    Contacter
  </button>

</article>

Les avantages concrets sont :

• Lisibilité : en lisant .user-card__avatar, on sait immédiatement qu'il s'agit de l'avatar au sein du composant user-card.
• Isolation : les styles d'un block n'entrent pas en conflit avec ceux d'un autre.
• Réutilisabilité : un modificateur (--featured, --disabled) permet de créer des variantes sans dupliquer le CSS.

Règle d'or : On ne crée jamais d'élément d'élément : .user-card__header__title est incorrect. Si la hiérarchie HTML est plus profonde, on garde quand même un seul niveau de double underscore : .user-card__title.

D. Cas concret : Création d'une carte de profil

Voici comment on structure un composant simple en respectant les bonnes pratiques de nommage et de séparation.

HTML (Structure)

<article class="user-card">
  <img src="avatar.jpg" alt="Photo de profil" class="user-card__avatar" />
  <h2 class="user-card__name">Jean Dupont</h2>
  <p class="user-card__bio">Développeur Front-end passionné par le CSS.</p>
  <button class="user-card__button">Contacter</button>
</article>

CSS (Style)

/* Style global du conteneur */
.user-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 300px;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Style de l'image avec cercle parfait */
.user-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover; /* Recadre l'image pour remplir le conteneur sans la déformer */
  margin-bottom: 15px;
}

/* Typographie du nom */
.user-card__name {
  color: #333;
  font-size: 1.25rem;
  margin: 10px 0;
}

/* Texte de description */
.user-card__bio {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Bouton interactif */
.user-card__button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* État au survol pour l'interactivité */
.user-card__button:hover {
  background-color: #0056b3;
}

E. Limitations

Bien que puissant, le CSS possède des pièges :

• La Spécificité : Parfois, une règle ne s'applique pas car une autre règle plus "forte" (ex: un ID vs une classe) prend le dessus. Cela peut mener à des guerres de sélecteurs.
• L'absence de logique conditionnelle : Le CSS pur ne permet pas de faire des if/else complexes (bien que les variables CSS et certaines fonctions comme calc() ou clamp() comblent ce vide).
• Compatibilité Navigateurs : Certaines propriétés modernes ne sont pas supportées par les versions très anciennes des navigateurs, nécessitant l'usage de "fallbacks" (solutions de repli).

4. Zone de Danger

❌ L'abus de !important L'utilisation de !important force l'application d'une règle en ignorant la cascade. C'est une solution de facilité qui rend la maintenance du code cauchemardesque car on ne peut plus surcharger le style normalement.

✅ Bonne pratique : Utilisez des sélecteurs plus précis ou revoyez l'architecture de vos classes.

❌ Le stylage via les IDs (#monId) Les IDs ont une spécificité très élevée, ce qui les rend difficiles à modifier plus tard. De plus, un ID doit être unique dans la page, ce qui empêche la réutilisation du style.

✅ Bonne pratique : Utilisez des classes (.ma-classe) pour tous vos styles.

❌ Les unités fixes (px) pour tout le layout Utiliser uniquement des pixels rend le site rigide et difficile à adapter aux écrans mobiles ou aux préférences de zoom des utilisateurs.

✅ Bonne pratique : Privilégiez les unités relatives comme rem, em, %, vw ou vh.

Positionnement du CSS dans le Web Stack

Questions clés

1. Quelle est la différence fondamentale entre HTML et CSS ?

Découvrir la réponse

Le HTML est un langage de balisage qui définit la structure et le sens du contenu (ex: "ceci est un titre", "ceci est un paragraphe"). Le CSS est un langage de style qui définit l'apparence visuelle de ce contenu (ex: "le titre doit être rouge et centré").

2. Qu'est-ce que la "Cascade" dans CSS ?

Découvrir la réponse

C'est le mécanisme qui permet au navigateur de résoudre les conflits lorsque plusieurs règles s'appliquent au même élément. Le navigateur suit un ordre de priorité basé sur l'importance (ex: styles inline vs fichiers externes), la spécificité du sélecteur et l'ordre d'écriture dans le code.

3. Pourquoi préférer les classes (.) aux IDs (#) pour le stylage ?

Découvrir la réponse

Les classes sont réutilisables sur plusieurs éléments et ont une spécificité modérée, ce qui facilite la maintenance et l'évolution du design. Les IDs sont uniques et trop "puissants", ce qui bloque souvent les tentatives de modification ultérieures via d'autres règles CSS.

4. Qu'est-ce que le Responsive Design ?

Découvrir la réponse

C'est une approche de conception qui permet à une interface de s'adapter automatiquement à la taille de l'écran de l'utilisateur. En CSS, cela se réalise principalement via les Media Queries qui appliquent des styles différents selon la largeur ou la hauteur de la fenêtre.

Mise en pratique

Exercice 1 : Reproduction guidée

Objectif : Créer un texte stylisé simple. Créez un fichier HTML avec un titre <h1> et un paragraphe <p>. En CSS, appliquez les règles suivantes :

• Le titre doit être de couleur bleu foncé, centré, avec une police sans-serif.
• Le paragraphe doit avoir une couleur grise, une taille de police de 1.1rem et un alignement justifié.

Découvrir la solution commentée

<h1>Bienvenue sur mon site</h1>
<p>Ceci est un paragraphe de test pour apprendre les bases du CSS.</p>

/* CSS */
h1 {
  color: #00008b; /* Bleu foncé */
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  color: #666666; /* Gris */
  font-size: 1.1rem; /* Unité relative pour l'accessibilité */
  text-align: justify;
}

Exercice 2 : Adaptation

Objectif : Ajouter de l'interactivité à un bouton. Reprenez le code du bouton de la "Carte de profil" vue dans le cours. Modifiez-le pour que :

• La couleur de fond soit verte au départ.
• Le bouton change de couleur pour devenir orange lors du survol (:hover).
• Le bouton réduise légèrement de taille (effet d'enfoncement) lors du clic (:active).

Découvrir la solution commentée

.user-card__button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease; /* Transition fluide pour tous les changements */
}

.user-card__button:hover {
  background-color: orange;
}

.user-card__button:active {
  transform: scale(0.95); /* Réduit la taille à 95% lors du clic */
}