CSS Reset

[00:00:00]
>> Kevin Powell: Finally, time to get into some actually writing some CSS with that out of the way. And the first thing we are gonna do, though, before we start having some fun with it is resetting our CSS. CSS resets are something that's a bit opinionated in a way. There's quite a few of them that are out there.

[00:00:13]
I mean, in this lesson on the website, there is the reset I'll be using. And for this one, I am gonna copy and paste it. We're not gonna be doing that as we go through this course, but I am gonna explain the reset and what everything is doing that's in here.

[00:00:25]
Just really fast, this is based on a modified version of Andy Bell's A (more) Modern CSS Reset. There are some differences that I've made in here, I won't highlight what those are. You can always compare notes to what he did in his. But I would recommend checking out that blog post if you do have some time just cuz he does a really nice job of going through everything and why he does the ones he does.

[00:00:44]
And you can then see the things that I've done a little bit different. When you're coming in with a reset, you also have to decide what the purpose of the reset is. In general, the idea of a reset is that all browers are starting on the same level playing field.

[00:00:57]
These days, some opinions do sneek into them a little bit, though. But they should just be, in my opinion, pretty lightweight and not too heavy-handed, and just getting everything set off in the right direction. So I'll save this and we'll see a few changes happen, not very much.

[00:01:13]
I think if you've written any CSS, you've probably seen the box-sizing border-box, so I won't go into too much detail. Just means that if you add padding, you're not altering the width of something. The padding is included in the width, so it makes our life a lot easier.

[00:01:26]
I think that's the one thing everybody in CSS can agree on is a good idea. This is something you don't see as often, this text-size-adjust one. I put a link to the blog post that explains. This is by Kilian Valkhof. I'm gonna say his name wrong, I apologize, Kilian.

[00:01:39]
[LAUGH] But this is for on iOS devices. Only on phones, if you turn them into landscape, it's gonna shift the font sizes on you. It's in there because of from the old days when a lot of websites weren't mobile optimized and they just left it there, so this prevents that from happening.

[00:02:01]
If you're doing things properly, you're taking care of things, you don't want the font size to switch. Hopefully, no one's looking at your website on landscape on their phone, but someone will [LAUGH] invariably. So this just handles that. There's this, margin: 0. A lot of people prefer coming in with a star 0.

[00:02:18]
If you wanna do that or even the star 0, sorry, margin: 0 and padding: 0 on that, go for it. This one's just a little bit more specific on what I'm setting the margins to. In this project, we could even get rid of some of these things cuz we're not gonna have them.

[00:02:32]
Highly leaving it there, though, just in case the project rose that I don't have to come back in and add them later on cuz that would be annoying. There's a third page, and all of a sudden, you have a block quote. You don't wanna be like, yeah, I wish I reset that.

[00:02:44]
So if you do the *1 here, that's completely fine. There are some things that margins aren't the end of the world on, so I'm gonna leave it like that. Instead of having a ol and ul of a margin and padding and list-style of none, as people like to do.

[00:03:00]
Just because a lot of the time when we have lists, we change the list styling, take off the margin, take off the padding. This has become a popular way of doing it. And I put, again, in a comment a link to an article that goes into much more detail on it, cuz I don't wanna talk about it too much.

[00:03:14]
But it's just the Safari will remove the semantics of a list if you do a list-style: none on it. They've actually changed that more recently to if you have a list in a navigation, it won't remove it. This is voiceover on Safari, which is one of the screen readers.

[00:03:31]
The reason that they did that is cuz developers like making everything a list. And then people that were using assistive technologies, it's reading the website out to them and everything was getting announced as a list. So they made the decision saying, there's too many lists out there. It's annoying for users, and users were complaining about it.

[00:03:47]
So they said, if you do a list-style: none, we're not gonna announce it as a list. This is if you want to make sure that it actually is announced as a list, cuz you have a good reason for it to be, but you know you need the list-style: none on there, this is a choice.

[00:04:02]
Another way you could actually achieve the same thing or similar anyway is a list-style and doing a empty space on there. I don't know enough about it to recommend doing it that way, but there is some content by Sara Soueidan, where she's talked about that and I just need to brush up on it.

[00:04:21]
So that's another one you could look into, or another option that you could look into, where it will keep the semantics of your list. Body, min-block-size, I'm gonna talk about that, that's similar to a min-height of 100vh. This is just to make sure if you need to center something or whatever, it's just handy to have there, I use it all the time.

[00:04:40]
And a default line-height, the default is usually 1.4, I like 1.6. If you like 1.5, 1.7, in this project, I'll just let you know, 1.6 is what you wanna have. h1s, buttons, other things like that, so h1, 2, 3, they're very large font sizes. Big line-height s look terrible, we pull them in tighter.

[00:04:58]
And buttons, inputs, labels, things that are one line that have padding on the top and the bottom, we pulled the line-height down just to make it easier to add the padding to them. And these are the ones we're gonna look at really quickly, if you've never seen them, text-wrap: balance and text-wrap: pretty.

[00:05:11]
So I'm gonna come on my h1 and make the font size a bit bigger. Font-size of, we'll just say 3rem. If you have a text-wrap: balance, this is for titles, which is why I have it on my h1 through h4 right now, not titles necessarily, but for large text.

[00:05:29]
And what it's gonna do, will open my DevTools to play with this a little bit. There we go. So you can see I have this all in one line, and when the browser gets smaller, it's going to drop mushroom foraging at the same time. It's balancing out the title instead of having the title have mushroom foraging on one line.

[00:05:46]
So if I take this off, the word mushroom goes back there, and our title is less balanced out. It's just a little bit nicer of a typography touch when it's balanced. It is a little bit opinionated, maybe you'll run into a situation where you don't actually like it.

[00:05:59]
But from a typography standpoint, it tends to be an improvement over having that one little word that gets stuck at the end of a line. We can take that off. The similar one we have, and I said I'd mentioned text-wrap: pretty, this is a progressive enhancement. I believe it's still only in Chromium browsers, is we can see that this paragraph right here at the bottom, we have the words if misdentified.

[00:06:25]
If I turn off my text-wrap: pretty, we just have the word misidentified all by itself. The idea here isn't with large blocks of text, it's with paragraphs, lists. Anything that's multiple lines long, you would use your text-wrap: pretty. And in typography, it's called an orphan, when you have one word but all by itself on the last line.

[00:06:43]
And it can just create an awkward look, especially if you have lots of text with these little orphans down the side. So if you're on a browser where it's not supported, it would look like this. If it is supported, it just makes sure that no word is left by itself.

[00:06:55]
This isn't the best example because the if is so short, but maybe if we resize that a little bit for one of the other lines. Can we get the other one line won't work, or we can do it here with treasures. So treasures, I'll highlight it. The word treasures here is either on there, or if it drops down, the word hidden drops down with it.

[00:07:16]
So that's what the text-wrap: pretty is doing. Image, picture, we're just setting the inline size. I had the block size before, this would be the same as max-width, 100%. So block size is on the block axis. It's a logical, sorry, inline size is on the inline axis. Block is our vertical axis, and it's just the logical property for those two.

[00:07:40]
And I'm very big on logical properties now. So if you see inline, it's always gonna mean you're left to right, and if you see block, it's up and down.
>> Kevin Powell: And then display: block. And then the last but not least are input, button, textarea, select, font: inherit. Just cuz those don't actually inherit your font properties, and that's why they often look kind of ugly.

[00:07:59]
So by having that on there, it just keeps a bit of consistency within your project.