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. They are good at what was common two years ago. They often struggle with what is possible today. Take modern CSS features like native nesting, container queries or scroll-driven animations. They do not show up often enough in the training sets to become 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. Three lines of CSS could have done the job. The AI just did not 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;
  }
}

Models are also not trained a lot on the features below yet. To validate an outcome, you need to know about it. So you need to know these new CSS features yourself.

Scroll Driven Animations Without JavaScript #

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card {
  animation: fade-in linear both;
  animation-timeline: view();
}

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,
::picker(select) {
  appearance: base-select;
}

sibling-index #

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

if Function #

padding: if(style(--dense: 1): 0.25rem; else: 1rem);

Anchor Positioning #

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  position-area: top;
}

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. They repeat 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. CSS evolves fast. If we let AI decide alone, the web will stop moving. Modern CSS keeps us sharp.

Resources #