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

When a passion becomes a grind

show
When a passion becomes a gri...
Dec 19 · General Musings with Kev...
11:22
Spotify Logo
 

This week I talk about the transition from enjoying coding for fun to facing the challenges and grind of doing it as a job. It's hard to find that balance between finding meaning in your job, and how you can loose your passion when it turns into a career.

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

View this email in your browser (or share it with a friend!) Hello Reader, Before we dive into the content of this one, I want to let you know that this will be the last newsletter of the year, and I’ll be back in your inboxes sometime in mid-January. I’ll still have YouTube videos coming out, so you can keep an eye out over there by making sure you’re subscribed (only like 4,000 away from 1 million!). I’ll also do a quick roundup of all the content I put out once the newsletter resumes. With...

View this email in your browser (or share it with a friend!) Hello Reader, It’s hard to pick one thing because there is so much to pick from right now, but I think my favorite new CSS feature is anchor positioning. Check out this navigation that I’ve put together for a project I’m working on, where the underline and link highlight is all from a single pseudo-element. That’s all done with something like 20 lines of CSS! And, with a handful more, I created a decent fallback for browsers that...

View this email in your browser (or share it with a friend!) Hello Reader, A very short email this week, with a little less content than usual. Between the Black Friday Sale, my Smashing workshop, and a few other things, it’s been pretty hectic! Luckily I knew this was all coming and made some regular content for all of December already 😅. 🙋♂️ What I’ve been up to this week Getting started with CSS Nesting CSS Nesting is awesome, though there are a few important things to know about it, which...