1. Expliquez la difference 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). Ideal pour aligner des elements dans une rangee ou colonne, distribuer l'espace, et centrer du contenu. CSS Grid est bidimensionnel : il gere lignes et colonnes simultanement. Ideal 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 element HTML est une boite composee de quatre couches (de l'interieur vers l'exterieur) : content (le contenu), padding (espace entre le contenu et la bordure), border (bordure), margin (espace entre l'element et ses voisins). Par defaut (content-box), width/height definissent 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 elements freres et parent-enfant.
3. Qu'est-ce que la specificite CSS et comment fonctionne-t-elle ?
La specificite determine quelle regle CSS s'applique quand plusieurs regles ciblent le meme element. Elle se calcule comme un score a quatre niveaux : inline styles (1,0,0,0), IDs (0,1,0,0), classes/attributs/pseudo-classes (0,0,1,0), elements/pseudo-elements (0,0,0,1). Le selecteur avec le score le plus eleve gagne. A specificite egale, la derniere regle declaree gagne. !important surpasse tout (a eviter). Bonnes pratiques : eviter les IDs pour le styling, utiliser des classes, adopter une methodologie (BEM) pour maintenir une specificite basse et uniforme. Les selecteurs longs ne sont pas toujours plus specifiques.
4. Expliquez le positionnement CSS (static, relative, absolute, fixed, sticky).
static : positionnement par defaut dans le flux normal. relative : positionne par rapport a sa position normale, l'element 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'element est relative jusqu'a 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 creer des designs responsifs sans framework ?
Approche mobile-first : ecrire le CSS de base pour mobile, puis ajouter des media queries pour les ecrans plus grands. Utiliser des unites 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 independants du viewport. Tester avec les outils de developpement du navigateur en redimensionnant.
6. Qu'est-ce que le BEM et pourquoi l'utiliser ?
BEM (Block, Element, Modifier) est une convention de nommage CSS. Block : composant autonome (menu, card, form). Element : partie d'un block, prefixee par __ (menu__item, card__title). Modifier : variante d'un block ou element, prefixee par -- (menu--vertical, card__title--highlighted). Avantages : specificite basse et uniforme (que des classes), code lisible et maintenable, pas de conflits de noms, composants reutilisables. 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 ?
Reduire le poids : minifier, supprimer le CSS inutilise avec PurgeCSS ou UnCSS. Eviter les selecteurs complexes (descendants profonds, selecteurs universels). Preferer les animations CSS (transform, opacity) aux animations JavaScript car elles sont gerees par le GPU. Utiliser will-change avec parcimonie pour les elements qui seront animes. Critical CSS : inliner le CSS au-dessus de la ligne de flottaison et differer le reste. Eviter le layout thrashing (lectures/ecritures DOM alternees). Utiliser le content-visibility: auto pour les elements hors-ecran. Reduire les repaints en animant uniquement transform et opacity.
8. Expliquez les pseudo-classes et pseudo-elements CSS les plus utiles.
Pseudo-classes (etat) : :hover (survol), :focus (focus clavier), :first-child/:last-child/:nth-child() (position), :not() (negation), :is()/:where() (groupement), :has() (parent selector, tres puissant). Pseudo-elements (contenu genere) : ::before/::after (contenu avant/apres, necessite content), ::placeholder (style du placeholder), ::selection (style de la selection 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'accessibilite clavier.
9. Qu'est-ce que les CSS Custom Properties (variables) et comment les utiliser ?
Les CSS Custom Properties (--ma-variable) sont des variables definies dans le CSS, accessibles via var(--ma-variable, fallback). Definies generalement sur :root pour la portee globale, mais respectent la cascade et l'heritage. Avantages par rapport aux variables Sass : dynamiques (modifiables au runtime, avec JavaScript ou media queries), cascadent, et gerent le theming facilement. Utilisation : systemes de design tokens (--color-primary, --spacing-md), themes dark/light avec un changement de classe, composants personnalisables. Elles peuvent etre animees avec @property pour des transitions fluides.
10. Comment assurer l'accessibilite 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 preference utilisateur en desactivant les animations. prefers-color-scheme : supporter le mode sombre. Unites relatives (rem) pour que le zoom navigateur fonctionne. Ne pas cacher du contenu uniquement visuellement si l'information est importante (utiliser sr-only plutot que display:none). Tester avec un lecteur d'ecran.