CSS’s Evolution Is More Than Just New Syntax

CSS is often dismissed as frustrating, but much of that frustration comes from outdated assumptions about what the language is and what it’s supposed to do. Rachel Andrew’s talk from An Event Apart DC 2019 digs into those assumptions, tracing them back to the hacks developers used before modern layout methods existed. The talk makes a clear case: CSS has changed dramatically, and the new features are designed to solve the problems developers have been fighting for years.

Andrew starts by dismantling a few long-standing complaints about CSS, pointing out that the old mental models simply don’t match how the language works anymore.

  • “You never know how tall anything is on the web.” Floats were never going to solve this because they only push elements side by side; they never look at the items around them. Modern layout tools like CSS Grid and Flexbox actually examine elements and make their behavior consistent.
  • “Flexbox is weird and unintuitive.” Flexbox isn’t about squishing items into a rigid box. If you treat it as a way to line things up next to each other, it feels strange. But it’s better understood as a system that looks at differently sized elements and determines the most logical layout by assigning space dynamically.

What CSS Wants to Do Next

Beyond correcting old misconceptions, Andrew’s talk previews where CSS is headed — and what problems the spec authors are actively trying to solve. It’s not just about more properties; it’s about giving developers deeper control over how content behaves.

Avoiding Data Loss

New alignment keywords like safe and unsafe give developers explicit control over whether CSS should aggressively prevent content from being accidentally clipped or hidden, or allow that overflow to happen.

.container {
  display: flex;
  flex-direction: column;
  /* Please center as long as it doesn't result in overflow */
  align-items: safe center;
}

Getting Real With Overflow

Content-sized boxes are finally practical. The min-content and max-content keywords let you create boxes that are just wide enough for their content, or as wide as the content can possibly need to be.

.container {
  width: min-content; /* Allow wrapping */
}

Laying Things Out Logically

The web isn’t inherently left-to-right. Grid and Flexbox quietly introduced a start-to-end way of thinking that works regardless of direction. That shift has led to the Logical Properties and Values specification, which allows layout properties to adapt to writing mode.

Making Content Portable

CSS Regions lets you flow content from one element into another. It’s a bit like the pipes in classic Mario Bros. games — jump into a pipe in one spot and you emerge from another — except you define the sources yourself, without the angry plants.

These points are just a sample of what Andrew covers in the full talk, which is available to watch online. The talk was recorded at the 2019 Washington D.C. event, but An Event Apart keeps an entire library of video presentations available from past conferences. The next D.C. event takes place April 13–15, and other events are scheduled throughout the year across the U.S.