CSS Resets

[00:00:00]
>> Kevin Powell: So we're about to move into layouts, but just before we do, I want to talk quickly about CSS resets. I mentioned one a little bit earlier on, and a few things that I'll talk a bit about later. So I just want to show you a very simple one you can use. You might want to use something a bit more. It's not even really a CSS reset. If you go back to the old days of CSS resets, the purpose of them was getting all browsers' defaults to be the same, as similar as possible, because in the old days, browsers did everything different.

[00:00:28]
These days, the user agent styles are all basically the same, so we don't have to force the browsers to be at the same starting point. Instead, the reset or maybe a CSS starter you want to call it, is more about giving us a sane starting point. There's very heavy-handed approaches you can take to it, but with modern CSS I find a very light touch gets us a very long way. So there is the box-sizing border-box.

[00:00:50]
I put a maybe up there. We talked a bit about, you might not need it, you probably want it, but it is possible you decide not to. There's the star of margin zero that a lot of people also include, so I did say some people want to put that. You can. There's the margin of zero only on the body though. If you're not doing it on the star selector, you do want to have it on the body. And we talked a bit about the line-height earlier of boosting that up.

[00:01:18]
I prefer 1.6, but most people like 1.5. If we make the line-height bigger there, on elements with big text, we want to make it tighter, so we can have a select, you know, some stuff there to do that. Here our input textarea buttons select the things that aren't inheriting the font properties. We can tell them to inherit. I used the shorthand before. Here I'm only saying the font-family font-size. It's really up to you.

[00:01:41]
The font shorthand would also work. And lastly, we saw that image, the problem with images that we had a little bit earlier and how they can cause responsive problems. So you can throw this in at the bottom as well. If you want more information or dive deeper into the concept of resets, I did include Eric, a blog post of Eric Meyer's original one. This is like the grandfather of the resets back in the day, created from a much older era of web development.

[00:02:07]
You'll see he's doing a lot. Not actually a lot, but enough. There's lots of selectors in here, and a few other things. I believe the font is being font-size 100%, so he's actually, there's a few interesting things that are in here, there's a table thing as well, but you can read that post if you're curious, and he even links to an older version of it along the way. So if you want to see the original one that he had.

[00:02:29]
There's two other ones here. I put Andy Bell's modern CSS reset and Josh Comeau's modern CSS reset. They're very similar to one another because most of us have started leaning towards one direction a little bit, being light touch, but there's some differences. And their blog posts detail step-by-step the decisions they made in them, so they could be worth checking out if you want a bit more information on sort of the thought processes that people are putting into resets these days.