Modern CSS is awesome, but why don't more people know?


View this email in your browser (or share it with a friend!)

Hello Reader,

It's been a while since I've had a long newsletter... I know some people prefer these, so if you're one of them, here we go (and for the rest, you can skim down to the next section 😉).

Also, stick with me, because this is going to tie back into web development in a second, but I grew up downhill skiing since the age of two or three.

From the age of seven until sometime in my twenties, I skied every weekend throughout the winter, first as a member of the local racing team and later as a coach for the team.

At one point during that time, something happened that completely changed how we ski.

The reason that happened is that the skis themselves changed.

That pair on the left is the older-style ski. They were very straight and very long. The ones to the right were some of the early ones in the new wave, becoming shorter and having a thicker tip and tail, with a narrow mid-section (I had a pair of those yellow Atomics at one point!).

That change in shape revolutionized skiing at all levels.

The reason I bring this up is that I find it interesting how we’ve had a revolution in CSS, yet we’re more or less stuck where things were five years ago.

Or, perhaps I shouldn’t use 'we' here, because not everyone is stuck. You’re reading this, so you probably do your best to keep up with CSS. Maybe you follow me to help you with that!

When I talk to people, whether it’s on social media or at in-person events, everyone I talk to is all into all the new stuff as well, and so it feels like everyone is hooked into it all… but all this time, I’m just hanging out and chatting with the little bubble of people who are into CSS.

As soon as I’m talking with someone who isn’t very plugged into CSS specifically, I start to realize how isolated my bubble is, and that most people have no idea about things that I take for granted, and that I talk about over and over again.

A recent comment on a video of mine, which means it’s someone who probably follows me, at least from time to time, highlights this.

As well as how well a recent Short about aspect-ratio and object-fit, two properties that I take for granted, has done.

And I get it, it’s not like skiing, because it isn’t a case of one or the other.

With skiing, you’re either on the old equipment and have to ski to how those work, or you get the new ones, and then learn the new way to ski using those.

In CSS, we don't upgrade to a new version of CSS that includes a bunch of breaking changes. All the old parts of CSS still work exactly the same way they always have (for better and for worse!), we just have new and improved stuff added on.

A lot of these new feautres can change how we write CSS, but many people don’t pay attention and continue to work the way they always have.

This is a shame, though, because so many things are so much easier than they used to be.

On top of that, not only are new things easier, but they can completely change how we approach common problems.

I’ve talked about some of these types of things a lot!

And the list goes on and on.

I don’t think everyone needs to switch and learn all the new stuff all at once. I completely understand that “if it ain’t broke, don’t fix it” when you’re working in a job and have much bigger priorities than learning some new way to solve a problem you already have a solution for.

But I do think more can be done to spread the word on what’s possible, even for the simple things like the object-fit and aspect-ratio that I mentioned above.

And that’s where I think you can come in. You can be that ski buddy who’s rocking all the new equipment that makes your friends jealous, but in a bit more of a friendly way.

Instead of trying to show off, if you learn something cool from one of my videos, let others know about it.

Or, if you come across a cool tip or trick on social media, share it.

It doesn’t have to be anything high effort, and you definitely don’t need to be that annoying coworker who’s trying to shove some overly-complex CSS into your projects, but a few small things here and there can get a few more people realizing how powerful CSS is getting!

Most people who listen to me, and who follow all the other CSS nerds out there are CSS nerds themselves. The more all of us talk about all the amazing things modern CSS can do, the more it will help people realize that it's getting to be a pretty amazing language 😊.

🙋‍♂️ What I’ve been up to this week

It might be time to rethink box-sizing: border-box

video preview

Speaking of how modern CSS has changed things, and inspired by Miriam Suzanne’s article on why you shouldn’t inherit box-sizing, I started to wonder if we even need to use box-sizing: border-box in our resets at all anymore.

I wouldn’t go into an old project and remove it, but in modern CSS, we don’t declare sizes very often at all, and when we do for things like containers/wrappers, pseudo-elements, etc, content-box is often better.

⚡ Quick tips of the week

🔗 Other awesome stuff around from the web

🎙️ Podcast

Zero-day CSS vulnerability

show
zero-day CSS vulnerability
Feb 20 · General Musings with Kev...
18:16
Spotify Logo
 

CSS was hacked! Or well, there was a zero-day vulnerability. This is the first time I do a “reaction” type video, and you can find the original one here.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

📝 Quiz time!

A few weeks ago I had a tricky selector question that most people got wrong (only 14% got it correct!). This one's tricky too, but a bit different: Only one of these selectors is valid, which one is it?

  1. :is(> *)
  2. :has(> *)
  3. :not(> *)
  4. :where(> *)

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.

Speaking of Chris’ CSS Starter that I linked to above, I haven’t ever released a “reset” or “starter” even after all these years, and every time I see someone else do it, I feel the pressure ramp up to put something out!

I’ve had a draft sitting in my pre-production database in Notion for quite some time now actually, but it’s one of those types of things that I’m very envious of written content for, as it can be updated over time… granted, as I write that, I could easily enough put the living version of it in written form, and simply make a video breaking it down 🤔

Anyway, that’ll be for another week!

Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

HTML & CSS for Absolute Beginners

A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Intermediate (Frontend Masters)

Build a Modern Site from Scratch

Build a fully responsive site using modern CSS features, along with some polished animations.

Enroll → (25% off first month of Frontend Masters if you use this affiliate link)

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

Hello Reader, Back in October, I travelled to Minneapolis to create a course with Frontend Masters, and while I was there, I recorded my experience so that I could share a behind-the-scenes look at what it was like. The first two videos in that series are now up on my second channel. This is something I’ve never done before, so there are some rough edges here and there, but I’m pretty happy with how they turned out! The final two episodes will come out this week. 🙋♂️ What I’ve been up to this...

Hello Reader, When I first started teaching CSS, I quickly realized that while I could muck around and get a layout to come together, I didn't actually understand much about CSS. Students would ask questions about why something worked the way it did, and I wouldn't have an answer. I started looking for resources that explained why things behaved the way they did, so I could understand them better and, in turn, teach them better, but I struggled to find any that did. Everything would teach you...

Hello Reader, First off, I completely forgot to send this newsletter last week, so this week’s has all my content from the past two weeks. As for the main topic of this week, after eight years, I’ve finally redesigned my homepage. For someone who talks about CSS all the time, I was a little embarrassed that I hadn’t redesigned it sooner. I think the old design was fine, and aged pretty well, but it wasn’t really anything great either. The new one is a bit more of a minimal approach, but where...