📝 CSS-Tricks 248: Unlearning CSS

View this newsletter on the web.

[Robin]: Imagine you could jump into the future — let’s say ten years — and watch how you write CSS. What would that look like? How much of the language do you expect will change over that period of time? How weird would the language now be?

I’ve been asking myself that question a lot this week, and it all started when I spotted a now-deleted tweet from Craig Mod where he asked why CSS Grid feels so unintuitive. “It gets much easier over time” I replied, “since it kinda requires you unlearn CSS to get to grips with it.” That sounds like a really pretentious answer to a straightforward question but I think it’s an honest one.

What does unlearning CSS mean though? And how does that apply to Craig’s frustration with CSS Grid being weird?

Well, if you’re used to the old model, and you came across some CSS Grid code using named areas, that might look mighty confusing.

.container { display: grid; grid-template-areas: "a a a" "b c c" "b c c"; }

What the what? What does this have to do with floats and clearfixes? What does this have to do with absolute positioning? Where are the negative margin hacks?

Well, sorry about that, but CSS now has an extremely flexible system of coordinates that you can now pinpoint with expert precision. It doesn’t map to the old mental model at all. But! If you’re new to CSS then the code above makes a lot more sense. You have an element, you create a grid, then you literally draw where you want those columns and rows to go. You can see how the interface will look, just from a glance at the code.

It might be that the only reason the above code looks unintuitive is that your intuition is bogged down with the history of micro-clearfixes and table layouts and other hacks from a bygone era. And the reason why I mention this is because it shows CSS is a language unlike any other on the web: it requires you to unlearn when things change.

For example: HTML is mostly additive. Every once in a while new tags get added to the existing bunch but you don’t have to rethink things. For the past decade HTML has remained mostly the same and I think for the next decade HTML will look pretty much identical. That’s a feature though, not a bug.

JavaScript has frameworks and new jQuery-esque syntaxes, sure. There’s node and npm dependencies. But if you learn the basic tenets of how JavaScript-the-language functions then those are all additive tools and skills that can be tacked on. You don’t have to go back and throw all that knowledge away to create a React app.

But CSS is a much more complex system because it does, from time to time, require that you unlearn what you know. Think about how we wrote CSS ten years: no grid, no variables, no filters, no libraries like emotion. It was a wildly different language and community back then and the language solved a different set of problems than those it does today.

Now, with container queries on the horizon, things are bound to look pretty different just within the next year or so.

My point here is that CSS is a language unlike any other because to unlock its true power, every couple of years you must unlearn it. You have to sit down at your keyboard and try to think like a beginner, like someone who has never seen CSS before.

With that said, I don’t think that in a decade CSS will look entirely foreign to us but I do think that the way all its properties interact with one another will be novel and weird as heck. And I’m saying this knowing that the basics of web design will always be the same: accessibility, performance, great typography, etc. are the kind of skills that will be needed forever.

But this specific way we do this one thing with CSS is likely to change. That’s why you have to unlearn it, and that’s what makes CSS so dang exciting to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s