MDN Web Docs (developer.mozilla.org) — the canonical CSS reference. Every property page lists syntax, values, browser support, and runnable examples. When in doubt, MDN is correct; treat blog posts as secondary.

web.dev (web.dev/learn/css) — Google's structured CSS course, written by people who work on Chrome's rendering engine. Strong on the why behind layout algorithms, not just the how.

CSS-Tricks (css-tricks.com) — the deepest archive of practical "how do I actually do X" articles and the famous Flexbox/Grid visual guides. Ownership has changed hands over the years; check publish dates on older posts.

Every Layout (every-layout.dev) — a small, paid set of essays on algorithmic layout patterns (Stack, Cluster, Sidebar, Switcher, Cover) that this site's layout pattern pages are directly inspired by. Worth the price for how it reframes layout as composition, not memorized recipes.

The CSS specifications themselves (w3.org/TR, drafts.csswg.org) — intimidating at first but the only source of truth for edge-case behavior. Skip straight to the spec when MDN and a Stack Overflow answer disagree.

Specs are organized as modules now (Selectors Level 4, Box Sizing Level 3, Flexbox Level 1) rather than one giant CSS2.1 document — search for the module name plus "CSS Working Group" to find the current draft.

"Working Draft" (WD) means still changing; "Candidate Recommendation" (CR) means implementers are testing it; treat CR+ as stable enough to build on.

Every property definition includes a formal syntax grammar (the "Value" line, e.g. <length> | <percentage> | auto) — reading that grammar is faster than guessing from examples once you know the notation.

The "Issues" boxes inline in draft specs flag open debates — a good signal that a feature's exact behavior may still shift across browsers.

Flexbox Froggy (flexboxfroggy.com) — a puzzle game that teaches flex container/item properties one level at a time. Genuinely the fastest way to build flex intuition.

Grid Garden (cssgridgarden.com) — the Grid equivalent from the same team; you water carrots by writing grid-template-columns, grid-column, etc.

CSS Battle (cssbattle.com) — recreate a target image with the shortest/most creative CSS; great for discovering shorthand tricks and gradient/shape techniques you wouldn't think to reach for otherwise.

Can I Use (caniuse.com) — not a puzzle site, but check it constantly: type a feature name, see support percentages and links to spec/bug trackers (see Using Can I Use).

Codepen (codepen.io) — browse the trending/popular feed for a constant stream of real techniques other developers are experimenting with, and fork anything to poke at it.

web.dev/baseline — "Baseline" status tells you at a glance whether a feature is safe to use without a fallback: Newly available (shipped everywhere recently) vs Widely available (safe for years). This site's own pages reference Baseline status where it matters.

Browser release notes — Chrome's "What's New in DevTools/Chrome" posts and Firefox/Safari release notes call out CSS additions in plain language, usually with a demo.

Follow a handful of individual engineers who work on browser CSS implementations rather than trying to track every outlet — their posts tend to explain why a feature works the way it does, not just that it shipped.

Revisit "hacky" code every year or two — flexbox centering tricks, clearfixes, and float-based grids you wrote pre-2020 likely have a one-line modern replacement now (gap, aspect-ratio, Grid).