CSS
Layout, specificity, z-index, animations, responsive design
Egg
Fundamentals
Hatchling
Intermediate
Responsive Design & Fluid Layouts
Responsive design has evolved beyond media queries. Container queries, fluid typography, and intrinsic sizing shift the paradigm from viewport-driven breakpoints to component-driven adaptability.
Z-Index & Stacking Contexts
Z-index only works within stacking contexts. Misunderstanding stacking contexts is behind most z-index bugs â adding z-index: 9999 is a symptom, not a solution.
The Box Model & CSS Positioning
Every element on the web is a rectangular box. The box model governs its dimensions; positioning governs its placement. Misunderstanding either causes layout bugs that no amount of flexbox can fix.
Pseudo-Classes vs Pseudo-Elements
Pseudo-classes select elements by state or position. Pseudo-elements create virtual elements for styling. The single-colon vs double-colon distinction is just the beginning.
CSS Units: Absolute vs Relative
Choosing the right unit is an architecture decision. px for borders, rem for typography, em for component-local scaling, viewport units for full-screen layouts â each serves a specific purpose.
Dinosaur
Advanced
CSS Architecture at Scale
BEM, CSS Modules, CSS-in-JS, Tailwind â every approach has trade-offs. Senior engineers choose based on team size, performance needs, and maintenance cost.
Selectors, Specificity & the Cascade
Specificity isn't magic â it's a deterministic scoring system. Understanding it alongside cascade layers and origin order is the difference between controlled CSS and a specificity arms race.
Layout Systems: Flexbox & Grid
Normal flow, Flexbox, and Grid aren't competing layout models â they're layers of a single system. Knowing when to reach for each one separates architectural layouts from hacked-together ones.
CSS Architecture & Methodology
CSS at scale is an architecture problem, not a language problem. The tools have evolved from naming conventions to compile-time extraction, but the core tensions â scoping, specificity, and dead code â remain.
Animations, Transitions & Motion
CSS animation performance isn't about writing fewer animations â it's about animating the right properties. The difference between 60fps and jank comes down to which rendering pipeline stages you trigger.
Apex
Architect