The evolving state of CSS
Recently I was listening to an episode of the Shop Talk Show podcast where they were talking about the recent State of CSS survey (if you haven't seen this site, even if you're not interested in the results, it's worth checking out because it's so fun!).
It was a fun episode, but on top of that, it made me realize how much CSS has grown up in a short period of time.
It's still not that old of a language, but it seemed to be a little stagnant for awhile, and then suddenly we had all these new features.
A lot of them were really fun, but Flexbox gave us our first actual layout tool! But browsers took forever to implement it, and even then, many implementations were bugger. Finally seemed to mostly get it figured out, and then suddenly we also had Grid as well!
The most exciting thing about Grid was how quickly it got picked up. Excluding IE, which you can get it working on, it has 91% support right now.
How did this happen?
A large part of this has to do with how CSS no longer goes through single "upgrades", like when we went from CSS2 to CSS3.
Every now and then you might hear about some new things coming in CSS4, but that's super misleading (thankfully I have been seeing this a lot less lately). There will never be a CSS4 because each "module" now can evolve on it's own.
This is one of the reasons that Grid was able to explode onto the scene. We didn't have to wait for all of CSS to take a step forward, that part of the spec can evolve on it's own.
The other important factor here is that the browsers jumped on it and implemented it super quickly.
And now with FireFox starting to support sub-grid, hopefully it pushes the others to implement it quickly as well!
While it's fun, there is a downside
Honestly, I'm excited by where CSS is now and where it's going. It's quickly growing up and becoming a much more powerful tool.
But that also has a downside to it.
One of the things I love about CSS is how easy it is to learn. It's a great gateway into programming languages because it has such a simple language (and please don't come at me that it's not a programming language because it doesn't have if/else statements or something).
As it evolves, it makes more and more things possible, but that also means there is a lot more to learn. When you first try learning flexbox or grid, it can be a little overwhelming at first because there are so many properties, values, and even new units.
It's a lot to take in, and of course that doesn't include things like pre- and post-processors and everything else outside of CSS which continues to keep getting more complex as well.
How can we keep up?
I have an unfair advantage over a lot of people in that I get to focus almost entirely on only CSS, which for me is a lot of fun!
And even then, I'm still surprised by it regularly!
And of course, it's not always big things like grid. There are a ton of small, really awesome features that a lot of people aren't even aware of.
We have CSS custom properties now, @supports, calc(), viewport units, among a ton of other stuff, and there is a lot of really exciting stuff on the way.
And as I said, I can focus on CSS. A lot of people are also looking at learning or staying on top of other technologies too. So much to do, so little time!
Making websites used to be relatively simple, though frustrating that you couldn't always do what you wanted to.
Now that we can pull off pretty much anything we want, we have to know how to do it. Knowing there is so much more sometimes intimidates people and makes them wonder how they'll ever learn it all.
I think the best way to do it is to not try and learn it all at once though.
Start with the fundamentals and build a few smaller things. Make sure you're comfortable with what you already know. I know I fall into problems of this to of wanting to learn everything at once. That dooms us though.
It's all about learning things properly, and that always starts with the fundamentals. Knowing how CSS works in general gives you more confidence with it and makes adding on top of that much easier.
And that doesn't only apply to CSS! It's the same if you want to get into JS. Learning React or Vue can seem complicated if you don't have a foundation in JS first (not that it can't be done), and even with JS, starting with the basics, building a few things, then adding on top really, really helps.
Start slow, practice what you're learning to help reinforce it, and don't stress about learning it all. Just focus on learning what you're focusing on, and doing one thing at a time 👍