1. Expliquez la différence entre Flexbox et CSS Grid. Quand utiliser l'un ou l'autre ?
Flexbox est unidimensionnel : il gere la disposition sur un seul axe (horizontal ou vertical). Idéal pour aligner des éléments dans une rangee ou colonne, distribuer l'espace, et centrer du contenu. CSS Grid est bidimensionnel : il gere lignes et colonnes simultanément. Idéal pour les layouts de page complexes, les grilles d'images, et les dispositions asymetriques. En pratique, combinez les deux : Grid pour la structure globale de la page, Flexbox pour l'alignement des composants internes. Grid excelle avec grid-template-areas pour des layouts semantiques et responsifs.
2. Comment fonctionne le Box Model en CSS ?
Chaque élément HTML est une boîte composee de quatre couches (de l'interieur vers l'extérieur) : content (le contenu), padding (espace entre le contenu et la bordure), border (bordure), margin (espace entre l'élément et ses voisins). Par défaut (content-box), width/height définissent uniquement la zone de contenu. Avec box-sizing: border-box, width/height incluent padding et border, ce qui est beaucoup plus intuitif. Bonne pratique : appliquer border-box globalement avec le selecteur universel. Les margins verticaux fusionnent (margin collapsing) entre éléments freres et parent-enfant.
3. Qu'est-ce que la spécificité CSS et comment fonctionne-t-elle ?
La spécificité determine quelle règle CSS s'applique quand plusieurs règles ciblent le même élément. Elle se calcule comme un score à quatre niveaux : inline styles (1,0,0,0), IDs (0,1,0,0), classes/attributs/pseudo-classes (0,0,1,0), éléments/pseudo-elements (0,0,0,1). Le selecteur avec le score le plus élevé gagne. A spécificité egale, la dernière règle declaree gagne. !important surpasse tout (à éviter). Bonnes pratiques : éviter les IDs pour le styling, utiliser des classes, adopter une méthodologie (BEM) pour maintenir une spécificité basse et uniforme. Les sélecteurs longs ne sont pas toujours plus spécifiques.
4. Expliquez le positionnement CSS (static, relative, absolute, fixed, sticky).
static : positionnement par défaut dans le flux normal. relative : positionne par rapport à sa position normale, l'élément reste dans le flux. absolute : retire du flux, positionne par rapport au premier ancetre positionne (non-static). fixed : retire du flux, positionne par rapport au viewport, ne bouge pas au scroll. sticky : hybride entre relative et fixed, l'élément est relative jusqu'à un seuil de scroll (top, bottom), puis se comporte comme fixed. Utilisation courante : sticky pour les headers de navigation, absolute pour les tooltips et dropdowns, fixed pour les modales et boutons flottants.
5. Comment créer des designs responsifs sans framework ?
Approche mobile-first : écrire le CSS de base pour mobile, puis ajouter des média queries pour les écrans plus grands. Utiliser des unités relatives : rem/em pour les tailles, %, vw, vh pour les dimensions. Flexbox et Grid avec fr units et auto-fit/auto-fill pour des grilles fluides. clamp() pour des tailles de texte fluides : font-size: clamp(1rem, 2.5vw, 2rem). Images responsives avec max-width: 100% et object-fit. Container queries (@container) pour des composants adaptatifs indépendants du viewport. Tester avec les outils de développement du navigateur en redimensionnant.
6. Qu'est-ce que le BEM et pourquoi l'utiliser ?
BEM (Block, Élément, Modifier) est une convention de nommage CSS. Block : composant autonome (menu, card, form). Élément : partie d'un block, prefixee par __ (menu__item, card__title). Modifier : variante d'un block ou élément, prefixee par -- (menu--vertical, card__title--highlighted). Avantages : spécificité basse et uniforme (que des classes), code lisible et maintenable, pas de conflits de noms, composants réutilisables. Alternative : CSS Modules ou CSS-in-JS qui resolvent l'encapsulation autrement. BEM reste pertinent pour les projets sans bundler ou avec du CSS pur.
7. Comment optimiser les performances CSS ?
Réduire le poids : minifier, supprimer le CSS inutilise avec PurgeCSS ou UnCSS. Éviter les sélecteurs complexes (descendants profonds, sélecteurs universels). Préférer les animations CSS (transform, opacity) aux animations JavaScript car elles sont gérées par le GPU. Utiliser will-change avec parcimonie pour les éléments qui seront animes. Critical CSS : inliner le CSS au-dessus de la ligne de flottaison et differer le reste. Éviter le layout thrashing (lectures/écritures DOM alternees). Utiliser le content-visibility: auto pour les éléments hors-ecran. Réduire les repaints en animant uniquement transform et opacity.
8. Expliquez les pseudo-classes et pseudo-elements CSS les plus utiles.
Pseudo-classes (état) : :hover (survol), :focus (focus clavier), :first-child/:last-child/:nth-child() (position), :not() (negation), :is()/:where() (groupement), :has() (parent selector, très puissant). Pseudo-elements (contenu genere) : ::before/::after (contenu avant/après, nécessite content), ::placeholder (style du placeholder), ::sélection (style de la sélection texte), ::first-line/::first-letter (typographie). :has() est revolutionnaire : permet de styler un parent en fonction de ses enfants (card:has(img) cible les cards contenant une image). Toujours inclure :focus-visible pour l'accessibilité clavier.
9. Qu'est-ce que les CSS Custom Properties (variables) et comment les utiliser ?
Les CSS Custom Properties (--ma-variable) sont des variables définies dans le CSS, accessibles via var(--ma-variable, fallback). Définies généralement sur :root pour la portée globale, mais respectent la cascade et l'héritage. Avantages par rapport aux variables Sass : dynamiques (modifiables au runtime, avec JavaScript ou média queries), cascadent, et gèrent le theming facilement. Utilisation : systèmes de design tokens (--color-primary, --spacing-md), thèmes dark/light avec un changement de classe, composants personnalisables. Elles peuvent être animees avec @property pour des transitions fluides.
10. Comment assurer l'accessibilité dans le CSS ?
Pratiques essentielles : contraste suffisant (ratio 4.5:1 pour le texte normal, 3:1 pour le grand texte selon WCAG AA). Focus visible : ne jamais supprimer outline sans alternative, utiliser :focus-visible pour un focus clavier visible mais pas au clic. Tailles cliquables : minimum 44x44px pour les cibles tactiles. prefers-reduced-motion : respecter la préférence utilisateur en desactivant les animations. prefers-color-scheme : supporter le mode sombre. Unités relatives (rem) pour que le zoom navigateur fonctionne. Ne pas cacher du contenu uniquement visuellement si l'information est importante (utiliser sr-only plutôt que display:none). Tester avec un lecteur d'écran.