CSS Reset box-sizing

[00:00:00]
>> Okay, so let's go to our selector review. So this is part one here. We're going to, I'm gonna open the ending code pen, you all open the beginning code pen. At the moment, they're the same and because I'm gonna code this live here in class. All right, so the reason we've got this here as a giant unordered list which is a total mess because we are going to go through a whole bunch of kinds of selectors, lists are a great way to start introducing those.

[00:00:31]
So just as always, a quick peek at the HTML before we start working with selectors. You have to know the patterns in your HTML before you write your CSS selectors based on those patterns in your HTML. So take a look at that there, we have h1 at the top of the page.

[00:00:50]
We have a link. It has a title in it. We have a couple of classes along the way, not as many classes as you would think. And we have links that go off site, we have links that stay on the site, we have links to PDFs. And we have ordered and unordered lists nested here.

[00:01:10]
So the HTML should be pretty familiar to you at this point in time. But the CSS, maybe not so much. All right, so let's start by writing some styles then. All right, at the very top of our CSS here, we have a declaration. And you've probably seen this declaration before, certainly, in my teaching, but maybe you've also seen this declaration in other places in CSS.

[00:01:36]
Does anybody here in the class know what that means at the top, that crazy thing here at the top? Okay, no one in the class knows what this means. All right, so star means what?
>> Select anything [INAUDIBLE].
>> Select everything in the universe, right? What does star before mean, star after?

[00:01:56]
>> The before or after pseudo selectors on any element.
>> Yeah, they're pseudo elements. We're gonna select the entire universe and everything that comes before it and after it. [LAUGH] That's a lot. And we're going to apply what? We're going to apply this thing called box styling border box.

[00:02:13]
So what is border box? Okay, so the default is the content box. The content box is when we start to do math and we figure out how big things are. We're going to add together the width of our border, we're gonna add together the width of our padding, the width of our margin.

[00:02:28]
And all of that together plus the content winds up being the width of our box, okay? When we say border box, we're gonna lump a bunch of that together, we're gonna lump together the border and the padding and the content. So if I said width is 500 pixels, in a content box model, that would literally be just the content is 500 pixels.

[00:02:51]
We'd have to add to that the padding, the border, and the margin. That is why when you say width of 500 and then it still blows out your page and it's actually 600 pixels wide and you're wondering why, that is where that comes from, all right. So border box says we're gonna lump together the width of the border, the padding, and the content.

[00:03:11]
So now when I say, 500 pixels, even if my border is 2 pixels wide, even if my padding is 10 pixels wide, all of that is included in the 500 pixels, and the content will scale accordingly. So we work with a constant 500 pixels, make sense? So the reason that I like to include this here is because one of the things that I have told you a million times, they're gonna put it on my gravestone.

[00:03:39]
If you can't see it, you can't style it. So the biggest piece of advice, if you take away nothing else today, put a border on it if you are trying to debug something in CSS. Put a border on it, that is your debugging tool. And by using our border box here, we are going to prevent bugs from showing up on the page, particularly layout bugs, where things slide underneath each other when you're not expecting it.

[00:04:04]
Sometimes that tiny little bit of border is enough to bump things down. And then after that, we just have styling here on the body element. We're gonna leverage inheritance for this. We're gonna talk much more about inheritance later on today. But here on our body element, we've applied our font family of Arial so it's not so honking ugly, and we've put in a slightly larger text size so that we can read it.

[00:04:27]
>> So making a border or using a border box, is that common practice for most, is that, I guess, best practices when you start to develop then?
>> Yes.
>> On the front end?
>> Yes, well, Bootstrap does it.
>> Okay.
>> If Bootstrap does it, it's probably right, right?

[00:04:44]
>> I was just curious because even with CSS in general, why they have it not default to the most common?
>> Gosh, isn't that a great question? Why wouldn't they default to what the most common one is? Because we didn't used to have border box the old days, we always had the content box.

[00:05:04]
Border box came along later and I think that's the reason why. Yeah, I think we're at the point where we really should be defaulting to it, but I don't write the browser specs, so yeah. In my world, it would, [LAUGH] yes.
>> I would just add to that pretty much every CSS reset that kind of-

[00:05:21]
>> Yes.
>> Include to start a project with-
>> Yes.
>> Includes this line of code or this snippet of code to change the box sizing to border box.
>> Yeah.
>> It's just much more straightforward mental model.
>> Absolutely, yeah, normalized.css
>> Does Tailwind have it? Does anyone know?

[00:05:39]
>> I'm sure if you look up any CSS reset, it's always the top.
>> Always at the top, and this is the reason why. So that's why it is what it is. And by the way the before, well, as you know, there's a node, right? And using JavaScript terms, we have the HTML element and that before and after, we have to select all those things.

[00:05:57]
That's why it looks that crazy way, because we wanna be sure to get before and after as well.
>> Okay, everybody online okay?
>> Yeah.
>> Okay.
>> We're just kind of reiterating the border box is including padding and merging into the total width [INAUDIBLE].
>> Right, yeah.

[00:06:21]
>> And then also echoing that, yeah. It's this border box reset is in Tailwind and essentially every framework.
>> Right, yeah. It adds in the border and the padding. The margin is always treated separate, okay, just to clarify. Yeah, you have a question, Ben.
>> Yeah, I was just gonna say, I know I guess I started thinking about it more, and is there a reason why we only do the before and after pseudo selectors and not, I mean, I know there are more.

[00:06:52]
But it's not clear to me why we only need before and after.
>> Mostly, it has to do with the node in HTML. So you have the actual element itself, and you have before and after the node. You can select those in JavaScript, and we have them in CSS, too.

[00:07:07]
That's why we're just using before and after.
>> Okay, you kinda said that, so I needed that.
>> That's okay. Not a problem to repeat.