Q
uand un projet web grandit, le CSS peut vite devenir difficile à contrôler si l’on n’adopte pas une méthode claire.
Les architectures CSS et les conventions de nommage ont justement été créées pour éviter ce scénario : elles apportent une structure, une logique et des règles qui rendent les styles plus prévisibles.
Dans un contexte de formation, d’examen ou de concours, ces notions sont essentielles, car elles montrent que l’on sait produire un code maintenable, pas seulement “qui fonctionne”.
Les QCM ci-dessous explorent les méthodologies les plus utilisées pour organiser le CSS à l’échelle d’un site ou d’une application : découpage en couches, séparation des responsabilités, gestion des états et des variantes, et choix de conventions de classes.
L’objectif est de comprendre comment éviter les conflits de styles, limiter la spécificité et rendre le HTML plus explicite.
En maîtrisant ces principes, on gagne en efficacité, on facilite le travail en équipe et on construit des interfaces solides sur le long terme.
Quand un projet web grandit, le CSS peut vite devenir difficile à contrôler si l’on n’adopte pas une méthode claire.
Les architectures CSS et les conventions de nommage ont justement été créées pour éviter ce scénario : elles apportent une structure, une logique et des règles qui rendent les styles plus prévisibles.
Dans un contexte de formation, d’examen ou de concours, ces notions sont essentielles, car elles montrent que l’on sait produire un code maintenable, pas seulement “qui fonctionne”.
Les QCM ci-dessous explorent les méthodologies les plus utilisées pour organiser le CSS à l’échelle d’un site ou d’une application : découpage en couches, séparation des responsabilités, gestion des états et des variantes, et choix de conventions de classes.
L’objectif est de comprendre comment éviter les conflits de styles, limiter la spécificité et rendre le HTML plus explicite.
En maîtrisant ces principes, on gagne en efficacité, on facilite le travail en équipe et on construit des interfaces solides sur le long terme.
QCM
1
Corrigé
Que signifie l'acronyme BEM en architecture CSS ?
A. Base, Entity, Modification
B. Block, Element, Modifier
C. Body, Element, Margin
D. Binary, External, Modular
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
BEM est une méthodologie qui aide à créer des composants réutilisables et à partager du code en équipe.
QCM
2
Corrigé
Dans la convention BEM, comment sépare-t-on le 'Block' de l' 'Element' ?
A. Par un tiret simple (-)
B. Par deux underscores (__ )
C. Par deux tirets (--)
D. Par un point (.)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'usage de '__' permet de distinguer visuellement le parent (Block) de son composant interne (Element).
QCM
3
Corrigé
Quelle classe BEM représente correctement un bouton 'valider' en version 'rouge' ?
A. .btn__red
B. .btn--red
C. .btn-red
D. .btn__red--modifier
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le 'Modifier' (--) est utilisé pour définir des variantes d'apparence ou d'état d'un bloc ou élément.
QCM
4
Corrigé
Quel est l'avantage principal d'utiliser une méthodologie comme BEM ?
A. Réduire la taille du fichier HTML
B. Éviter les conflits de noms et la spécificité trop élevée
C. Accélérer le chargement des images
D. Remplacer le JavaScript
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
En utilisant uniquement des classes, BEM maintient une spécificité basse et prévisible.
QCM
5
Corrigé
Selon BEM, un élément peut-il exister en dehors de son bloc parent ?
A. Oui, si on utilise un ID
B. Non, un élément est sémantiquement lié à son bloc
C. Seulement sur mobile
D. Oui, via l'héritage
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Un élément comme '.card__title' n'a de sens qu'à l'intérieur du bloc '.card'.
QCM
6
Corrigé
Quelle architecture CSS propose de diviser les fichiers en : Base, Layout, Components, States, Themes ?
A. OOCSS
B. SMACSS
C. Atomic CSS
D. ITCSS
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
SMACSS (Scalable and Modular Architecture for CSS) est une approche populaire pour organiser les projets.
QCM
7
Corrigé
Que signifie OOCSS ?
A. Object Oriented CSS
B. Only One CSS
C. Organized Original CSS
D. Optimal Output CSS
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'OOCSS encourage la séparation de la structure (taille) et de la peau (couleurs, bordures).
QCM
8
Corrigé
Dans le sélecteur '.c-card__image--rounded', quelle est la fonction du préfixe 'c-' ?
A. Indiquer une couleur
B. Indiquer qu'il s'agit d'un Composant (Component)
C. Indiquer une constante
D. C'est une erreur de syntaxe
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les namespaces (c-, l-, u-) aident à comprendre le rôle d'une classe au premier coup d'œil.
QCM
9
Corrigé
Quelle structure de dossiers suit la méthodologie ITCSS ?
A. Une pyramide inversée allant du général au spécifique
B. Un dossier unique par page
C. Une structure basée sur les balises HTML uniquement
D. Un classement par ordre alphabétique
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
ITCSS (Inverted Triangle CSS) organise les styles pour gérer la cascade efficacement.
QCM
10
Corrigé
Pourquoi est-il déconseillé de faire de l'imbrication profonde (nesting) en CSS (ex: .a .b .c .d) ?
A. Cela ralentit le serveur
B. Cela crée une spécificité trop forte et rend le code difficile à maintenir
C. C'est interdit par le W3C
D. Cela change la couleur du texte
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Plus le sélecteur est long, plus il est difficile d'écraser ses styles plus tard.
QCM
11
Corrigé
Dans BEM, peut-on avoir un élément dans un élément (ex: .block__elem1__elem2) ?
A. Oui, c'est recommandé
B. Non, la structure doit rester plate (un seul niveau d'élément)
C. Seulement pour les menus déroulants
D. Oui, mais uniquement avec Sass
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
On préférera '.block__elem2' même s'il est physiquement dans 'elem1' pour garder la structure simple.
QCM
12
Corrigé
Quelle classe d'utilité (Utility Class) suit la philosophie d'Atomic CSS ?
A. .header-blue
B. .u-text-center
C. .card-modifier-active
D. .main-layout
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Une classe atomique ne fait qu'une seule chose très spécifique (ex: centrer le texte).
QCM
13
Corrigé
Comment appelle-t-on le fait de regrouper des propriétés CSS communes dans une classe 'objet' réutilisable ?
A. Le Factorisation
B. L'encapsulation
C. Le polymorphisme CSS
D. L'abstraction
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
L'abstraction permet de créer des motifs de design (ex: un objet 'média') réutilisables partout.
QCM
14
Corrigé
Dans SMACSS, où place-t-on les styles pour les grilles et les sections majeures ?
A. Base
B. Layout
C. Module
D. State
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La couche Layout définit la structure globale de la page.
QCM
15
Corrigé
Quel préfixe est souvent utilisé pour les classes qui ne servent qu'au JavaScript ?
A. js-
B. script-
C. action-
D. j-
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Le préfixe 'js-' indique aux développeurs CSS qu'ils ne doivent pas styliser cette classe car elle est liée à un comportement.
QCM
16
Corrigé
Dans BEM, comment représente-t-on un état activé sur un menu ?
A. .menu.active
B. .menu--is-active
C. .menu__active
D. .active-menu
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'utilisation d'un Modifier '--is-active' est la norme BEM pour un état.
QCM
17
Corrigé
Quelle est la règle d'or d'ITCSS concernant l'ordre des fichiers ?
A. Du plus spécifique au plus général
B. Du plus général (reset) au plus spécifique (overrides)
C. Par date de création
D. Les composants avant la base
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Cela permet de profiter de la cascade naturelle du CSS sans utiliser !important.
QCM
18
Corrigé
Qu'est-ce qu'une 'Single Source of Truth' dans un projet CSS ?
A. Un fichier HTML unique
B. Un fichier de variables centralisé (couleurs, tailles)
C. Le site du W3C
D. L'inspecteur du navigateur
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Centraliser les variables permet de changer une couleur sur tout le site en une seule modification.
QCM
19
Corrigé
Dans le sélecteur '.l-grid__item', que signifie le 'l-' ?
A. Link
B. List
C. Layout
D. Large
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Il identifie une classe appartenant à la structure de mise en page.
QCM
20
Corrigé
Quel est l'impact de BEM sur la lisibilité du code HTML ?
A. Il le rend plus court
B. Il le rend plus verbeux (long) mais beaucoup plus explicite
C. Il le rend illisible
D. Il n'a aucun impact
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Bien que les classes soient longues, on comprend immédiatement la hiérarchie des composants.
QCM
21
Corrigé
Lequel de ces sélecteurs est proscrit en méthodologie BEM ?
A. .header__nav
B. .header .nav
C. .header--dark
D. .header__logo
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
BEM évite les sélecteurs descendants pour garder une spécificité de classe unique.
QCM
22
Corrigé
Comment appelle-t-on le fait d'écrire des styles CSS à l'intérieur du HTML via des classes utilitaires ?
A. Semantic CSS
B. Utility-First CSS (comme Tailwind)
C. Inline Styling
D. BEM styling
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'Utility-First utilise des classes prédéfinies pour construire des designs sans écrire de nouveau CSS.
QCM
23
Corrigé
Dans SMACSS, quelle couche est utilisée pour les styles de reset et les polices ?
A. Modules
B. Layout
C. Base
D. Themes
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Base contient les styles globaux appliqués directement aux sélecteurs de balises (html, body, p...).
QCM
24
Corrigé
Que signifie le concept de 'Dry' (Don't Repeat Yourself) en CSS ?
A. Éviter la redondance de code en utilisant des classes réutilisables
B. Ne pas utiliser de couleurs vives
C. Utiliser un fichier CSS vide
D. Ne pas commenter son code
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Le DRY CSS favorise la modularité pour réduire le poids des fichiers.
QCM
25
Corrigé
Pourquoi utilise-t-on souvent un underscore ou un tiret au début d'un nom de fichier Sass (ex: _variables.scss) ?
A. Pour le cacher de l'utilisateur
B. C'est un 'partial' : il ne sera pas compilé en un fichier CSS seul
C. C'est une règle de sécurité
D. Pour qu'il soit lu en premier
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les partials sont importés dans un fichier principal pour organiser le projet.
QCM
26
Corrigé
Quelle est la principale critique faite à la méthodologie BEM ?
A. Elle est trop compliquée à apprendre
B. Les noms de classes peuvent devenir très longs
C. Elle n'est pas compatible avec Chrome
D. Elle oblige à utiliser du JavaScript
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Certains développeurs trouvent les classes '.block__element--modifier' esthétiquement lourdes.
QCM
27
Corrigé
Dans ITCSS, à quoi servent les 'Objects' ?
A. Aux animations 3D
B. Aux motifs de design non-visuels (ex: le wrapper, le système de grille)
C. Aux images
D. Aux variables de couleurs
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Les objets sont des structures répétables sans styles cosmétiques (couleurs, etc.).
QCM
28
Corrigé
Lequel de ces outils aide à automatiser l'organisation CSS et à éviter les erreurs de nommage ?
A. PostCSS
B. Stylelint
C. Prettier
D. Tous ces outils
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Ces outils permettent de valider que les conventions d'équipe (comme BEM) sont respectées.
QCM
29
Corrigé
Dans BEM, comment nommerait-on une icône située à l'intérieur d'un bouton ?
A. .button .icon
B. .button__icon
C. .icon--button
D. .button-icon
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'icône est un 'Element' du 'Block' bouton.
QCM
30
Corrigé
Quel est l'objectif final de toutes ces méthodologies (BEM, SMACSS, OOCSS) ?
A. Rendre le CSS plus joli
B. Assurer la scalabilité et la maintenance à long terme d'un projet
C. Rendre le code complexe pour les débutants
D. Supprimer le besoin de media queries
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elles permettent à des dizaines de développeurs de travailler sur le même code sans tout casser.
Mots & Définitions
Consultez les définitions des termes importants.
L’architecture CSS désigne l’organisation globale des styles dans un projet afin qu’ils restent clairs, cohérents et faciles à maintenir. Elle définit des règles de structure, de nommage et de découpage des fichiers. Une bonne architecture limite les conflits et facilite le travail en équipe.
BEM est une méthodologie de nommage qui structure les classes CSS en Bloc, Élément et Modificateur. Elle rend les composants plus prévisibles et réduit les conflits de styles. Elle aide aussi à éviter une spécificité trop élevée.
Un block représente un composant autonome, réutilisable, qui a du sens par lui-même. Il peut être utilisé à différents endroits sans dépendre du contexte. C’est la base de la structure BEM.
Un element est une partie d’un block qui n’a de sens qu’à l’intérieur de ce block. Il décrit un sous-élément fonctionnel, comme un titre, une icône ou une image de composant. En BEM, il est étroitement lié à son bloc.
Un modifier décrit une variation d’apparence ou d’état d’un block ou d’un element. Il permet de changer un style sans créer un nouveau composant. C’est une manière propre de gérer les variantes et les états.
Le nommage BEM suit une convention lisible qui indique clairement la structure et le rôle d’une classe. On distingue généralement le bloc, l’élément et le modificateur par des séparateurs. Cette clarté améliore la maintenance du HTML et du CSS.
La spécificité est la règle qui détermine quelle déclaration CSS l’emporte lorsqu’il y a conflit. Plus un sélecteur est précis, plus il est difficile à surcharger proprement. Les méthodologies CSS cherchent souvent à garder une spécificité faible et stable.
Le nesting profond consiste à empiler plusieurs niveaux de sélecteurs, ce qui crée des règles très difficiles à surcharger. Cela augmente la spécificité et rend le code fragile. En maintenance, un petit changement peut avoir des effets inattendus.
SMACSS est une approche d’architecture CSS qui classe les styles par catégories comme base, layout, module, state et theme. Elle aide à structurer un projet à grande échelle. Son objectif principal est la clarté et l’évolutivité.
OOCSS est une méthode qui applique des principes d’organisation inspirés de la programmation orientée objet au CSS. Elle encourage la réutilisation en séparant la structure et l’apparence. Cela réduit la duplication et facilite la création de composants.
ITCSS est une architecture qui organise les styles du plus générique au plus spécifique. Elle suit une logique de couches, ce qui limite les effets de bord et facilite la surcharge contrôlée. Cette structure est pensée pour les projets complexes.
Les couches ITCSS répartissent les styles en niveaux, des réglages globaux jusqu’aux overrides très spécifiques. Cette progression réduit les conflits en contrôlant l’ordre de chargement. Elle permet aussi de savoir rapidement où placer un nouveau style.
Les objects sont des motifs de mise en page réutilisables qui définissent une structure sans imposer un style visuel fort. Ils servent par exemple à gérer un wrapper, une grille ou un alignement. Leur intérêt est de standardiser des bases de layout.
Les utility classes sont des classes très ciblées qui appliquent une seule règle ou un petit groupe cohérent. Elles permettent d’aller vite et de réduire la création de styles spécifiques. Cette approche est fréquente dans les méthodologies orientées utilitaires.
Atomic CSS est une philosophie qui privilégie des classes unitaires, chacune correspondant à une propriété simple. Elle facilite la composition rapide d’interfaces et limite la duplication. Elle peut toutefois rendre le HTML plus chargé si elle est mal cadrée.
Utility-First est une approche où l’on construit l’interface en combinant des classes utilitaires directement dans le HTML. Elle offre une grande rapidité d’itération et une cohérence forte. Elle demande cependant une discipline de design pour rester lisible.
Les préfixes de conventions aident à identifier le rôle d’une classe dans l’architecture CSS. Ils distinguent par exemple les composants, les layouts, les utilitaires ou les hooks JavaScript. Cela rend le code plus explicite et mieux structuré.
DRY signifie qu’il faut éviter de répéter les mêmes styles partout. En CSS, cela passe par la création de classes réutilisables et de composants cohérents. Le but est de simplifier la maintenance et réduire les erreurs.
Une Single Source of Truth centralise des décisions de design comme les couleurs, les tailles ou les espacements. Cela évite les incohérences et facilite les changements globaux. C’est souvent réalisé via des variables ou des fichiers de configuration.
Le linting CSS consiste à analyser automatiquement le code pour détecter des erreurs, des incohérences ou des mauvaises pratiques. Il impose des règles de qualité et de style. Cela améliore la stabilité du code, surtout en équipe.
Stylelint est un outil de linting dédié au CSS qui aide à uniformiser les conventions et à éviter les erreurs. Il peut vérifier le nommage, l’ordre des propriétés ou certaines règles d’architecture. C’est un allié précieux pour maintenir un projet propre.
PostCSS est un outil qui transforme le CSS via des plugins. Il peut ajouter des optimisations, gérer la compatibilité navigateur ou appliquer des conventions. Il s’intègre souvent dans une chaîne de build moderne.
Un partial Sass est un fichier destiné à être importé dans un autre, plutôt que compilé seul. Il sert à découper le code en modules comme variables, mixins ou composants. Cette organisation améliore la lisibilité et la réutilisation.
La scalabilité CSS désigne la capacité d’un code de styles à grandir sans devenir instable ou ingérable. Elle dépend fortement des conventions, de l’ordre des fichiers et du découpage en composants. Une architecture solide permet d’ajouter des fonctionnalités sans casser l’existant.
À propos de ce QCM
L
es notions évaluées dans ces QCM portent sur la manière d’organiser le CSS pour qu’il reste lisible et durable, même lorsque le projet évolue.
Une première famille de concepts concerne les méthodologies de nommage, dont l’objectif est de rendre les composants identifiables au premier coup d’œil.
En structurant les classes autour d’un composant principal, de ses sous-parties et de ses variantes, on évite les styles « collés au contexte » et on facilite la réutilisation.
Un second axe important touche à la gestion de la spécificité.
Plus un sélecteur est complexe et imbriqué, plus il devient difficile à surcharger proprement.
Les architectures CSS modernes encouragent donc des sélecteurs simples, des conventions strictes et un ordre de chargement maîtrisé.
Cela réduit les effets de bord, les correctifs en cascade et l’usage excessif de règles de priorité.
Les QCM abordent aussi des modèles d’organisation de fichiers et de couches.
L’idée est de partir de styles généraux (reset, typographies, réglages globaux), puis d’aller vers des styles de plus en plus spécifiques (composants, états, exceptions).
Cette progression logique aide à savoir où écrire un style et comment le surcharger sans créer de dette technique.
Enfin, l’approche utilitaire et la philosophie “ne pas se répéter” mettent en avant la réutilisation intelligente.
En combinant des objets de mise en page, des classes utilitaires et une source centralisée de variables, on obtient un CSS plus cohérent, plus rapide à faire évoluer et mieux adapté au travail en équipe.
Conclusion
C
es QCM permettent de consolider une compétence souvent décisive en développement front-end : savoir structurer et maintenir un CSS qui tient dans la durée.
En travaillant ces méthodologies, on apprend à réduire les conflits, à garder une spécificité maîtrisée et à construire des composants réellement réutilisables.
Avec un entraînement régulier, l’apprenant développe des réflexes de nommage, d’organisation et de découpage qui améliorent directement la qualité de ses projets.
C’est une progression solide, utile autant pour réussir un examen que pour livrer un code professionnel en production.
