What Exactly is “Modern” CSS?

I was flipping through my RSS feed, noticing how many times “Modern” is popping up in post titles. I have a purdy good idea what that means, particularly when it’s describing CSS. We’ll probably get into CSS Grid, maybe adjust specificity with Cascade Layers, perhaps reach for a conditional pseudo-selector, or even play with a new colorspace. There’s so much modern CSS that there’s never been a more exciting time to be writing about it!

So, when is “modern” not so, you know, “modern” anymore? I can’t help but be a bit pendantic about these things. When the web itself is somewhat transient, it’s tough not to think about permanence and longevity. What’s the famous Billy Corgan Stevie Nicks line?

Time makes you bolder,
Even children get older,
And I’ll get older, too.

Stevie Nicks, “Landslide”

Remember when every blog post made it a point to use “CSS3” when referring to new CSS features when we got things like rounded corners and box shadows? We might enjoy a quick chuckle with those now, but they do provide a lot of context as far as when a particular post was written and what it might be about. We’re probably not getting into grid layouts as much as clearfixing floats, yeah yeah?

We don’t need to go back to that system of anything, but there’s got to be some way to refer to this specific moment in time where CSS has exploded with the richest set of features we’ve seen since… since… since… CSS3. I love that CSS specs are no longer versioned like that but we’re definitely starting to see a challenge with how we refer to releases.

Any ideas?

• Maybe we refer to things in eras, as in Responsive Design Era, Massive JavaScript Framework Era, Jamstack Era, or whatever.
• Maybe we make things decade-specific, as in, Whoo boy, 2020’s CSS sure did change the way we write color on the web! The web sure is old enough to count in decades.
• Maybe we look at things as periods of time. Like Picasso has his “blue period” CSS can have its “Table-Based Layout Period” or its “Clearfix Period” or its “Intrinsic Sizing Period” or its “Logical Property Period” or its…

I’m bad at this. Naming is always hard yet it’s just something we have to do in CSS to properly select things. I think it’s time we start naming things like this, too. It’s only a matter of time before “modern” isn’t “modern” anymore.