💻

Why AI Is Making Frontend Average

Frontend Is Getting Average Again #

AI helps us write code faster, but speed is not quality. Most AI tools suggest solutions that work but feel old: media queries everywhere, Flexbox centering for everything, and custom selects rebuilt with JavaScript.

The problem is not missing specs; the problem is missing real use cases. AI learns from what is used most, not from what is best today.

AI Learns Patterns, Not Intent #

AI can read CSS specs and summarize blog posts, but AI does not "feel" layout problems. It does not build design systems or refactor code after one year. So it falls back to patterns from years ago.

The Knowledge Gap and Risk for Juniors #

Large Language Models (LLMs) are trained on historical data, meaning they excel at what was common two years ago but often struggle with what is possible today. Many modern CSS features, like native nesting, container queries, or scroll-driven animations. These features are simply not present in high enough volume in the training sets to be the default suggestion.

This creates a dangerous feedback loop for junior developers. If they rely entirely on AI suggestions, they may never learn that these modern features exist. They might spend hours debugging complex JavaScript for a scroll effect that could have been three lines of CSS, simply because the AI didn't know any better.

Modern CSS Features AI Often Misses #

Container Queries Instead of Media Queries #

AI still prefers viewport logic.

@media (min-width: 768px) {
  .card {
    display: grid;
  }
}

But components do not live in viewports. They live in containers.

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
  }
}

Modells are currently also not trained a lot on the below features. To validate an outcode you need to know from it. Did you know all those new CSS features?

Scroll Driven Animations Without JavaScript #

@scroll-timeline reveal {
  source: auto;
}

.card {
  animation: fade-in linear both;
  animation-timeline: reveal;
}

CSS Nesting and :has() #

.card {
  & h2 {
    margin-bottom: 0.5rem;
  }
}
form:has(input:user-invalid) {
  border-color: red;
}

Typed CSS Variables With @property #

@property --progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.progress {
  --progress: 70;
  width: calc(var(--progress) * 1%);
}

Variable Fonts #

h1 {
  font-variation-settings: "wght" 650;
}

Cascade Layers #

@layer reset, base, components, utilities;

Scroll Snap #

.carousel {
  scroll-snap-type: x mandatory;
}

.slide {
  scroll-snap-align: center;
}

color-mix #

background: color-mix(in oklab, blue 80%, white);

light-dark #

color: light-dark(#111, #eee);

Native Select Styling #

select {
  appearance: none;
}

sibling-index #

li {
  animation-delay: calc(sibling-index() * 60ms);
}

if Function #

padding: if(var(--dense), 0.25rem, 1rem);

Anchor Positioning #

.tooltip {
  position-anchor: --trigger;
}

text-wrap Balance #

h1 {
  text-wrap: balance;
}

flow-root #

.container {
  display: flow-root;
}

clamp Instead of Media Queries #

h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

The Risk With AI #

AI Makes Average Cheap #

AI makes average cheap. Junior developers often trust AI output blindly, repeating old patterns instead of exploring modern solutions. Modern CSS exists, but only humans push it forward.

Conclusion #

The Web Must Keep Moving #

Frontend is not finished, and CSS evolves fast. If we let AI decide alone, the web will stop moving. Modern CSS keeps us sharp.

Resources #