The AI Wrote Better CSS Than I Expected

I’ll be honest: I expected the AI-generated CSS to be a disaster. Inline styles everywhere, !important sprinkled like salt, the works. Instead, I got this:

CSS Modules with native nesting. Custom properties for every theme value. Responsive breakpoints that actually make sense. clamp() for fluid typography. Proper use of aspect-ratio. Even prefers-reduced-motion media queries.

The secret

Constraints. We put hard rules in the CLAUDE.md file: no inline styles, no Tailwind, all colors as CSS variables, camelCase for module classes. The AI followed every single one. Turns out, AI writes great CSS when you tell it exactly what "great" means for your project.

Where it fell short

Spacing. The AI loves var(--space-4) for everything. It’ll give you technically correct spacing that feels lifeless. The fix was simple: review the spacing in the browser and nudge it. But the structure — the selectors, the nesting, the organization — that was solid from the start.