Mastery

CSS · Expert - architecture, internals and edge cases

• The rendering pipeline: reflow, repaint, compositingUnderstand the four phases of browser rendering so you know exactly which CSS properties are expensive and how will-change works under the hood.
• Cascade layers (@layer) and @scopeMaster the two new cascade criteria - layers and scope proximity - to architect your styles without specificity wars.
• Colors and advanced functions: oklch, color-mix, min/maxLeverage perceptual color spaces, relative color syntax and typed math functions to build design systems the browser computes for you.
• Expert grids: subgrid, auto-fit and minmaxBuild self-adapting grids without media queries and align nested components on the parent's tracks with subgrid.
• Modern interactions: scroll-snap, view transitionsOrchestrate magnetic scrolling, browser-animated state transitions and rigorous respect for prefers-reduced-motion.