Nuxt Dashboard Template

2. Sélecteurs et propriétés : Cibler et styliser les éléments

Owen, le développeur expérimenté, pose une main sur l’épaule d’Eva : « HTML, c’est le squelette. CSS, c’est l’art de lui donner une âme. Aujourd’hui, tu vas apprendre à viser juste ! »

Eva sourit : « Alors on commence par apprendre à cibler les bons éléments ? »

Rostand, lui, ouvre son éditeur et tape : « Oui ! Bienvenue dans le monde des sélecteurs. »

Objectif de cette leçon

Comprendre comment cibler des éléments HTML avec CSS.
Apprendre la spécificité : qui gagne si plusieurs styles s’appliquent.
Découvrir les propriétés CSS de base pour donner vie à vos pages.

Qu’est-ce qu’un sélecteur CSS ?

Un sélecteur indique à CSS quel élément HTML sera stylisé. Chaque sélecteur peut être suivi d’un bloc de propriétés pour définir son style.

/* Exemple simple */
p {
    color: blue;
    font-size: 18px;
}

Ici, p est le sélecteur, et les propriétés (color, font-size) définissent son apparence.

Types de sélecteurs essentiels

Type	Exemple	Cible quoi ?
Élément	`p {}`	Tous les paragraphes `<p>`
Classe	`.btn {}`	Tous les éléments avec `class="btn"`
ID	`#header {}`	L’élément unique avec `id="header"`
Universel	`* {}`	Tous les éléments de la page
Enfant direct	`div > p {}`	Les `<p>` directement dans un `<div>`
Descendant	`div p {}`	Tous les `<p>` dans un `<div>`
Voisin direct	`h1 + p {}`	Le premier `<p>` juste après un `<h1>`
Attribut	`input[type="text"] {}`	Les `<input>` avec `type="text"`
Pseudo-classe	`a:hover {}`	État d’un lien quand on passe la souris dessus
Pseudo-élément	`p::first-letter {}`	La première lettre de chaque `<p>`

La spécificité en CSS

Eva demande : « Que se passe-t-il si deux styles s’appliquent au même élément ? » Owen sourit : « On calcule la spécificité. »

Tableau de spécificité

Voici la table de spécificité CSS reformulée de manière claire et structurée :

Tableau de Spécificité CSS

Sélecteur	Inline (`style="..."`)	ID (`#mon-id`)	Classe (`.ma-classe`)	Élément (`p`, `div`)
Inline	1	0	0	0
ID	0	1	0	0
Classe	0	0	1	0
Élément	0	0	0	1

Explications

Inline (style="...") :
Les styles définis directement dans l’attribut style d’un élément ont la priorité la plus élevée (valeur 1 pour Inline, 0 pour les autres).
ID (#mon-id) :
Les sélecteurs d’ID sont plus spécifiques que les classes et les éléments. Ils ont une valeur de 1 pour ID et 0 pour les autres.
Classe (.ma-classe) :
Les sélecteurs de classe sont plus spécifiques que les éléments mais moins que les ID. Ils ont une valeur de 1 pour Classe et 0 pour les autres.
Élément (p, div) :
Les sélecteurs d’éléments sont les moins spécifiques. Ils ont une valeur de 1 pour Élément et 0 pour les autres.
Forcé la valeur d’une propriété avec !important :
La déclaration !important est utilisée pour donner à une valeur de propriété CSS la priorité la plus élevée possible. Elle surpasse toutes les autres règles de spécificité, y compris les styles inline définis directement dans l’attribut style. Lorsqu’elle est ajoutée à une propriété CSS (par exemple color: red !important;), elle force cette déclaration à s’appliquer en priorité absolue, écrasant toutes les autres déclarations conflictuelles pour cette même propriété, quelle que soit leur origine ou leur spécificité. Cependant, son utilisation excessive est généralement déconseillée car elle peut rendre le code CSS difficile à maintenir et à déboguer, en contournant le mécanisme naturel de cascade et de spécificité de CSS.

Autrement dit

Override ultime avec !important :
Le suffixe !important constitue l’override absolu dans la cascade CSS, surpassant toute spécificité existante — y compris les styles inline. Lorsqu’appliqué (margin: 0 !important), il écrase systématiquement toute déclaration concurrente indépendamment de son origine, son poids ou sa position dans la feuille de style.

Bonnes pratiques UX/UI :

🔴 Éviter en production : Son usage compromet l’architecture modulaire et la maintenabilité du design system
🟡 Cas légitimes : Corrections temporaires en environnement legacy ou pour des hacks de compatibilité navigateur critiques
🟢 Alternative pro : Structurer sa CSS avec une méthodologie BEM/ITCSS et des utility classes plutôt que de contourner la cascade

En UX engineering, !important représente un code smell : il masque généralement un problème de spécificité mal gérée ou une mauvaise hiérarchie DOM/Sass. Privilégiez toujours une architecture CSS scalable plutôt qu’une solution atomique violente.

Règles de Priorité

Plus la valeur totale est élevée, plus la règle est spécifique et prioritaire.
En cas d’égalité, la dernière règle déclarée dans le code CSS l’emporte.

Ce tableau est essentiel pour comprendre comment les styles CSS sont appliqués et résolus en cas de conflits. |

💡 Règle : Plus le score est élevé, plus la règle a de poids.

Un style inline bat tout le reste.
Les ID > Classes > Éléments.
Si égalité : le dernier déclaré dans le code gagne.

Les propriétés CSS de base

Propriété	Description	Exemple
`color`	Couleur du texte	`color: red;`
`background-color`	Couleur de fond	`background-color: #f0f0f0;`
`font-size`	Taille du texte	`font-size: 16px;`
`font-weight`	Graisse (normal, bold)	`font-weight: bold;`
`border`	Bordure	`border: 1px solid black;`
`margin`	Espacement externe	`margin: 20px;`
`padding`	Espacement interne	`padding: 10px;`
`box-shadow`	Ombre portée	`box-shadow: 0 4px 6px rgba(0,0,0,0.1);`

Exemple concret

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Exemple Sélecteurs CSS</title>
        <style>
            /* Sélecteur élément */
            p {
                color: #333;
                font-size: 18px;
            }
            /* Sélecteur classe */
            .highlight {
                background-color: yellow;
            }
            /* Sélecteur ID */
            #main-title {
                color: darkblue;
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
        <h1 id="main-title">Bienvenue sur Devinsto</h1>
        <p>Ce paragraphe a un style par défaut.</p>
        <p class="highlight">Ce paragraphe est surligné !</p>
    </body>
</html>

Ce qu’Eva retient

Utiliser les classes pour les styles réutilisables.
Réserver les ID pour des éléments uniques.
Toujours penser spécificité pour éviter les conflits.
Grouper ses styles dans des fichiers externes pour plus de clarté.