Quick heads up: This email is kicking off a series of daily emails that will run for the next 10 days. If you would rather skip those emails and stick to my Sunday ones only, you can click here to opt out of receiving the daily ones.

Hello Reader,

About a month ago, I talked about the curse of modern web development, explaining how we can run into problems because we have too many choices now.

One of the reasons so many choices exist now is because we have so many different potential needs and requirements for any given project that anything generic enough would be a jack of all trades: it can do a bit of everything, but it can’t do any of it particularly well.

We might feel like all the solutions out there are simply trying to solve the question of “How can I create a website?"

A static site generator and React are both trying to solve that “how can I create a website” problem, but once you get one level deeper (the type of website we’re trying to create), they are not trying to solve the same problem anymore.

What I find interesting is that most solutions for CSS are trying to tackle the same problem but in completely different ways.

That problem? The global nature of CSS.

BEM was one of the first solutions that exploded in popularity.

It tackles the problem of global CSS with its naming system to avoid conflicts while using a single, global CSS file (or at least something that’s compiled into one).

CSS-in-JS solutions tackle the problem by taking naming out of it, relying on the component-based nature of tools like React.

Tailwind took yet another approach, going to the other extreme as BEM and finding a way to avoid having to worry about naming or specificity at all, even with a single global CSS file.

The interesting thing is that I don’t think the global nature of CSS is a problem.

If anything, it’s an asset.

It allows us to write a lot less code if we lean into it properly and allows for things like scope simply by using a descendant selector.

Now, that’s not to say that there aren’t good ideas that we can leverage from things like BEM, Tailwind, and even CSS-in-JS, but before we try to worry about using one or the other, we should embrace CSS a little bit for what it is and lean into how it works.

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

Native CSS Nesting

This is a bit front of mind for me at the moment because I just spent the week deep diving CSS nesting, which doesn’t allow for BEM style &__child.

If that looks strange to you because you’ve never used a pre-processor for nesting and you don’t know anything about how it works, you can start with this video.

​

But if you have been using nesting, I made a video specifically looking at the differences between CSS and Sass nesting.

​

Based on the comments on those two videos and some replies on Twitter, people aren’t happy that CSS nesting isn’t exactly the same as Sass nesting.

I get it because we’re really used to how Sass nesting works, and the &__ pattern has become so normal for us.

I love writing my class names that way, and even though I’ve moved away from a pure BEM-style approach, I like that pattern.

But maybe with CSS nesting not supporting that, we’ll gain a little bit more love for simple descendant selectors.

As far as I’m concerned, there’s nothing wrong with them if used properly.

I’m also sort of happy that Sass nesting will continue to work the way it does for making &__ possible, though, and it’s another reason I’ll keep using it going forward 😅.

CSS animation tricks using timing functions

​

I didn’t only look at nesting this week, as I took a 60-second break from it to look at two different things we can do with CSS timing functions that I don’t think are very well known.

First, I looked at how we can use steps(), and second how we can change the timing function of an animation in the middle of that animation.

Understanding CSS in 2023

I was also on the PodRocket podcast as well, where we had a really fun conversation covering a bunch of fun topics.

I talked a bit about my journey to where I am today, nerded out about some modern CSS stuff, and talked about learning CSS in 2023.

🔗 Other awesome stuff around the web

The only thing I knew about noise filters was that they were used to generate cloud effects in Photoshop.

But as David Fitzgibbon explains, we can use noise() in JavaScript to create some pretty creative results, not just black and white clouds like I thought it was good for 😅.

It’s a nice, short read, but one that you can genuinely walk away from having learned something neat!

🏁

As a quick reminder, I’ll be back in your inbox tomorrow, continuing our talk of how a lot of different things out there, like BEM and Tailwind, have really good ideas, and we’ll talk about how we can steal them to get the best of both worlds 🙂.

Cheers,
Kevin

​Unsubscribe · Preferences​
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246