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

The dicochomy of grid

show
The dicochomy of grid
Nov 14 · General Musings with Kev...
20:25
Spotify Logo
 

I’m a huge advocate for keeping CSS Grid as simple as possible, but I’m also a huge fan of subgrid which sort of forces us to have more complex grids. So, this week I talk about that conflict, and eventually I talk myself into how we can keep things simple (or, at least less complicated) even when using subgrid.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

Also, I’ve switched to a new host for the podcast. It looks like the RSS redirect is working fine, and it’s going out to both Spotify and Apple podcasts without issue, but if you are subsribed and have run into any problems, I’d appreciate if you hit reply and let me know.

📝 Quiz time!

Continuing the trend of seeing if you watched this week’s video 😅: When using CSS Grid's repeat() syntax, which of these will continue making new columns, even if there aren't any elements to place in them (in other words, it will potentially create empty columns).

  1. repeat(auto, …);
  2. repeat(auto-cols, …);
  3. repeat(auto-fill, …);
  4. repeat(auto-fit, …);

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.
113 Cherry St #92768, Seattle, WA 98104-2205

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

View this email in your browser (or share it with a friend!) Hello Reader, A bit of a different email this Sunday, as I don't have any new content to share (which is the first time I haven't had anything in a long time). Instead, I'm writing to let you know on Tuesday and Wednesday of this week, I’m giving a workshop with Frontend Masters called Modern CSS Fundamentals. The workshop is for anyone ready to move from doing their best to getting CSS to work to truly understanding it. Whether...

View this email in your browser (or share it with a friend!) Hello Reader, I’m going to keep the intro short on this ones because there is a lot going on in the What I’ve Been up to section, but before we jump into into that, two quick things: As an experiment for Interop 2026, Jake Archibald and the team at Firefox habe put together a way to gather more feedback on what features matter most to developers. So, if you head on over here, you can pick the proposals that are important to you, and...

View this email in your browser (or share it with a friend!) Hello Reader, A few weeks ago, I posted a video about the current state of the internet after I had a terrible AI-generated CSS article showing up in my news feed. I was saddened by how it was getting priority over quality content from sites like Piccalilli, Smashing Magazine, CSS-Tricks, and countless other excellent sources (I’ve put a bunch in the other links around the web section below if you’re looking for more to follow). At...