The AI Pivot

How AI is driving the return to HTML & CSS

The Rise of the Declarative

AI models excel at mapping design intent to declarative structures.

  • HTML provides the semantic skeleton.
  • CSS handles the visual state and layout.
  • Declarative code is "self-documenting" for AI.

"Tell the AI what you want it to look like, not how to build the logic."

Accessibility by Default

Semantic HTML is the universal language of a11y.

AI agents are trained on W3C standards. When they output HTML, they tend to use:

  • Proper heading hierarchies (H1-H6)
  • Aria labels where necessary
  • Form labels for inputs

This "standard-first" approach replaces complex JS accessibility hacks.

Reducing Hallucination Risk

JavaScript errors often lead to runtime crashes. HTML/CSS errors usually just lead to visual glitches.

JS Risk: Infinite loops, null pointer exceptions, state synchronization issues.
HTML/CSS Safety: Browser-native handling of malformed tags or unknown properties.

CSS is the New Logic

Past: JS Heavy

Media queries, basic layout, logic-driven animations via JavaScript libraries.

Present: CSS First

Container queries, Grid, Flexbox, :has() selector, and native scroll-driven animations.

AI agents lean on these modern CSS features because they are more robust and performant than custom JS implementations.

Traditional CSS Over Tailwind

Standard CSS is becoming the preferred choice for AI efficiency.

.card { display: flex; padding: 1rem; }
  • Token Efficiency: Clean CSS rules require fewer tokens than verbose utility classes.
  • Semantic Clarity: AI maps design intent to structured stylesheets.
  • Sustainability: Tailwind's future is uncertain following 75% staff layoffs.
TOKENMAXXING
"When a measure becomes a target, it ceases to be a good measure."
— Goodhart's Law

The Loss Leader Phenomenon

AI-generated code is currently a loss leader for major tech providers.

 Tokens are subsidized to drive adoption.

 Companies accept high compute costs today to own the developer workflow tomorrow.

 Shift to HTML/CSS lowers the "cost per generation."

"The product isn't the code; the product is your dependency on the model."

Native Web APIs Over JS Polyfills

AI models are increasingly suggesting native browser features that used to require heavy JS weight:

Feature Old JS Way Modern Native Way
Modals Custom React State <dialog> element
Tooltips Popper.js / libraries Popover API
Accordions Event Listeners <details> & <summary>

Performance as a Feature

When AI generates HTML/CSS instead of React/Vue components:

  • Zero Runtime: No library to parse or execute.
  • Lower TBT: Total Blocking Time drops significantly.
  • SEO Friendly: Content is visible without client-side rendering.
  • Fewer Dependencies: Reduce your exposed surface area to supply chain attacks.

AI is optimizing for the medium, not the framework.

The 95/5 Rule

95% HTML & CSS
JS

AI is shifting development back to a content-first architecture where JavaScript is the "progressive enhancement," not the prerequisite.

Conclusion

AI is making the right code easier to write.
HTML > CSS > JS

Try the html-css-first claude skill

Simon MacDonald

@macdonst@mastodon.online