CSS Architecture and Performance
Scaling CSS across teams and large codebases. The cascade deep dive, architecture methodologies, CSS-in-JS trade-offs, design tokens, theming, and CSS performance at scale.
The full cascade algorithm with all eight levels, specificity beyond the basics, inherited vs non-inherited properties, and how cascade layers change everything.
@layer ordering, nesting layers, managing third-party CSS with layers, the relationship between layers and !important, and migration strategies for existing codebases.
BEM, ITCSS, CUBE CSS — when each methodology works, when it doesn't, and how to combine them with modern CSS features like cascade layers and custom properties.
CSS Modules for automatic class name scoping, :global for escape hatches, composes for sharing styles, hash naming strategies, and when CSS Modules are the right choice.
styled-components vs Linaria vs Panda CSS vs vanilla-extract — the performance trade-offs, SSR implications, React Server Components compatibility, and when each approach wins.
Token hierarchy from primitive to semantic to component, building a theme switching system, dark mode implementation, and how design tokens bridge design and engineering.
How browsers match selectors (right to left), the real cost of CSS, contain and will-change properties, and what actually matters for performance at scale.
Inline critical CSS for above-the-fold speed, extraction tools and techniques, deferred stylesheet loading, and measuring the impact on Core Web Vitals.
The Paint API for custom backgrounds, Properties and Values API for typed custom properties with animation, Layout API for custom layout algorithms, and the current state of browser support.
8 'which style applies?' scenarios testing cascade layers, specificity interactions, inheritance, !important inversion, and the full cascade algorithm.