Hello Reader,

This week I put out a video where I showed a few modern CSS features that can be useful in a CSS reset, and it resulted in a lot of comments asking about what reset I use.

The interesting thing about resets is how their purpose has changed over time.

Originally, we used them to help us make sure all browsers were behaving in the same way, but thanks to how much parity we have in them now, for the most part, resets these days tend to be a lot simpler, which is a good thing!

In a way, we sort of don’t need a “reset” anymore, but outside of, say, the box-sizing thing (which I think we can all agree on), the rest of them is generally based on personal preference.

And because of that, most “resets” we see now are opinionated, but considering what a reset does, I think they should be opinionated.

Someone making web apps with a specific tech stack is going to have different things that they tend to want to reset when compared to people who might work on more content-heavy sites, for example.

If you’re wondering, I use a slightly modified version of Andy Bell’s (more) Modern CSS Reset, but it also got me thinking that I should share some sort of “starter” CSS that I use!

To that end, I think I will do a live stream in a few weeks, diving into a bit of a reset but also looking at a few patterns that I use in every project.

I think it could be fun to do it as a live stream to get some feedback while I build it out and to then have a nice little starting boilerplate of sorts 😊.

I’ll make sure to share the details of when that will happen ahead of time in this newsletter.

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

Improve your reset with these modern CSS additions

​

Modern CSS has a few nice little quality of life things we can add to our resets, like text-wrap: pretty and balance, and I also think it’s worth declaring a container-type: inline-size on some of our landmark elements as well!

The easy way to understand flexbox alignment

​

Extra video this week! It’s easy to mix up justify-content and align-items, and also, why don’t we have a justify-self? In this video I take a look at some tricks to remembering the difference between the two of them, and better understanding why they work a little differently from one another.

🔗 Other awesome stuff around from the web

• [Center Items in First Row with CSS Grid - A fun post by Ryan Mulligan, exploring how we can center content with grid (that sent me down a bit of a rabbit hole).
• ​Anchor Positioning - Tab Atkins-Bittner’s talk from CSS Day is now public, and you have to watch it. I had been keeping an eye on anchor positioning, but didn’t realize how great it is until this talk.
• ​The Over-Easy Machine - Speaking of anchor positioning, Adam Argyle has this great 10 minute run down on a lot of what you can do with it, including using popovers, with the added bonus of using @starting-style to animate them in and out.

🏁

I’ve talked about this a few times, but a quick reminder (and heads up for those new to this newsletter), I’m going to be speaking at Smashing Conference in New York in about a month from now!

It’s taking place from October 7th-10th, and I’ll be talking alongside Brad Frost, Carrie Fisher, Josh W. Comeau, Jessica Hische, Tejas Kumar, and a bunch of other awesome speakers.

And you can get 15% off tickets with this link!

Also, you can use this document to help convince your boss to send you.

I hope I get to see you there!

Kevin

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