Inheritance

[00:00:00]
>> Kevin Powell: But now one thing I just did that's kind of annoying is I put this color here and I put the color here, and I put the color down here. And now if I wanted to change that color, say, I don't know why, but let's just say we want to make it a lot lighter, I do that 50%. And OK, those are 50%, but then I have to apply it here and I have to apply it down here and you have to remember all these different places to change it.

[00:00:22]
And that's not really very good. It makes it very hard to maintain our CSS when we have to remember all the different places something has changed. One way that we can do that is something called inheritance. Inheritance is just like we inherit things from our family members, your parents, your grandparents, your eye color, your hair color, all those different things. One of the reasons I'm prematurely gray is not because I'm writing CSS all day long, it's a family trait.

[00:00:51]
So we can rely on inheritance to quickly set up styles. So what this means is, if we look at this quick example right here, where on this example, I have H1, H2, just like we did in the project, paragraph, all with the exact same styles on it. Which is kind of silly because we don't have to do it that way. We can come, I'm just going to cut or copy this, delete all this, so it's going to go back to the default styling across the entire page, and then I can write body to select my body and paste that same code in, and we get the exact same styling that we just had.

[00:01:31]
I've seen very like projects from senior developers that are not using inheritance. They're redeclaring things within components. Some of modern web development that's becoming so componentized gets people to have blinders on and they're focused so much on the one thing that they're working on, they don't think of the bigger picture. You can have so much less code and so much easier to maintain projects by relying on inheritance.

[00:01:52]
As far as what properties are inherited, it's anything that deals with the way the thing looks and not the layout of it. So it tends to be all the typography related things. If you're changing what the text looks like, that will be inherited. If you're changing a layout, that won't be inherited. Easiest way to think about it. Important with inheritance, the reason this is working, my body selector, CodePen, we don't have them, but everything is inside of a body, so everything is inheriting it.

[00:02:22]
You can also do this at a smaller scale, because I see people having the intro, and then they're going to select all the things in the intro to change the styling of them. Instead of that, I could do the exact same approach and just rely on inheritance at a closer level. So intro, I could do a color. Let's do orange red, just so it really stands out, and only that section is changed. It's changing both the H1 and the paragraph, they're both inheriting that color coming from there because they haven't declared a specific color on those elements, so they just inherit those properties directly from it.

[00:02:57]
Really important note here, form related elements don't go by that rule that I just said. They are set up with default styles on them. It's the same reason that links don't inherit a color. Links have a blue color on them, so we actually have to select those specifically to overwrite it. In the old days of the web, the default styles, we had serif text, black background as the main style, and all the form stuff has a sans-serif text on it at a different font-size and different stuff on it.

[00:03:24]
We don't need this for our project, but I'm just going to mention it now because it's a useful thing for when you run into weird problems later on, that this is a very common line to include in your CSS. Just to force the inheritance, because you can choose a property and say, you know what, instead of being based on what you were before, I want you to inherit from the parent, just by using the inherit keyword, you can use that inherit keyword absolutely anywhere you want.

[00:03:49]
So you could force inheritance of other things that aren't normally, not too often you'll do that, but the option is there. But for this is like a base level thing at your CSS you'll see that a lot. And we'll be talking more about the idea of a CSS reset in a little bit as well. In our project, I mentioned we did this the wrong way as well, so I'm just going to quickly update the version that I had, which did not look very good, or it looked fine, sorry, but just wasn't very efficient.

[00:04:19]
So I can take off anything except for the span, we'll talk more about that in a second, but I can take off that paragraph color and the other one, and I can just rely on inheritance. Body color is HSL 0 0%, 20%. It's going to look the same, but it just means that if I do want to change the color, I can do it in one place and it's a lot easier. As much as possible, set up the global styles on the body, sort of like the global setup for what your project's going to be, and then slowly but surely you get more specific.

[00:04:52]
So then I go, oh my headings need to be a different color, oh my links need to be a different color, oh my font-size over here needs to be a different color. So you can slowly layer those things back on from the global styles that you set by declaring a lot of different things on the body itself. Also here I mentioned that our span that's in the H2. Normally, if I don't declare this, it's all going to the gold color, I gotta save that.

[00:05:20]
It's all going to the gold color because of inheritance once again. This span is inside the H1. I've set a color on the H1, the span is inheriting that color. So we, sometimes the inheritance can be a little bit annoying, it's not so bad here, but it's because it's inheriting, then I have to come in, I get more specific, so I use my, we'll go back to the old version we had here and go back to that version, and then I do have to repeat that color again, HSL 0 0%, 20%, and then we have the two different text colors coming in.