Introduction to Web Development CSS Better Practices

Transcript from the "CSS Better Practices" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: This is the one we were in before, right? If I add another paragraph,
>> Brian Holt: It's green, right? But what happens if I want, these are now different paragraphs, right? This one's like the leading paragraph, and this one is like a trailing paragraph or something like that, and I want them to be styled differently for what ever reason.

[00:00:31] Using these p tags, you can't do that, you can't differentiate between the two. So what you need to do is that's when these classes, all that stuff I just made you do, and you were banging your head against table saying why am I doing this? It's going to start making sense now.

[00:00:51] So, lets collapse that right there. I now have leading paragraph and secondary paragraph and here. Why is this so weird? That's weird, okay. Leading P, which refers to this one is green, and secondary P is blue, right?
>> Speaker 2: Does the dot just indicate that it's the class?
>> Brian Holt: Yep.

[00:01:28]
>> Speaker 2: Okay.
>> Brian Holt: That's exactly.
>> Speaker 2: Would you [CROSSTALK] an id then?
>> Brian Holt: Nope use a hash.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, which I think I talk about later. We'll get to that when we get to that. But, notice here that I have a leading period in front of the class.

[00:01:46] That's just indicating to CSS, I am styling right now based on an ID, because in theory, I can have both an ID, and a class that have the same name and they are totally separate, right? They're kept in totally different spaces. So, if I say like here, ID.

[00:02:01] By the way this is a bad idea but just for demonstration purposes if I wanted to address this what I would say is leading-p right, and that would address this, not this. So again, contrived example, really bad idea, but that's the concept at play here.
>> Brian Holt: So my question is here, if I add another paragraph with no class, no class, I crack myself up.

[00:02:41] What color would it be? This is all the CSS right here.
>> Brian Holt: It's gonna be black, why? It's black because it has no other option right, it's like nothing is setting it to be anything else and the default color for the browser is black, so it is black.

[00:03:12]
>> Brian Holt: Again, because no rules are affecting it. So again we kind of see where this is going right?
>> Brian Holt: Classes are extensively used for styling. And for some people, I'm mostly in this train of thought but exclusively. I will prefer to never style based an ID, and the reason being is that it's not reusable.

[00:03:46] And very rarely do I try and write things that are not reusable, right? If I spend all this time writing this beautiful CSS to make this little widget really pretty, I don't want that to be unique right? Like I want to be able to rip that out and use it on another page.

[00:04:01] It's all about code reuse and ID's are not reuseable for the most part. Cool, so this is kind of what we've been leading up to is there are different rules for styles winning out right? Or stated differently when two styles conflict, which one gets applied. When we're about to talk about that, here in a second.

[00:04:23] Right if I have, going back to this example over here, just close these, leave this page. Leave this page, thank you CodePen. Leave this page. Now let's leave this page okay. Like if this has both leading paragraph and secondary paragraph which one wins out, right? That question is not intuitively obvious.

[00:04:57] So if it's not intuitively obvious then don't worry because it's not. But that's again leading up to this thing specificity that we are going to talk about.
>> Speaker 3: Can you just go over once again how you differentiate the classes and the IDs in the CSS?
>> Brian Holt: Sure, so let's just say this one up here is id="paragraph-1".

[00:05:19] Right, I think I talked about, I have slides on this, so we'll go over it a couple times, but it would just be paragraph-1. So that-
>> Speaker 3: So the hash versus the period?
>> Brian Holt: It's the hash. This hash means that it's an ID. Say like color yellow should end up being yellow, yeah.

[00:05:48]
>> Brian Holt: All right more questions? Please.
>> Speaker 4: Is there a way of setting up your csf so it's relational? So you could say the second paragraph following a div, I want it to have this style?
>> Brian Holt: Yeah so there definitely is. It's kind of beyond the scope of this class.

[00:06:09] That's a bit more of an advanced technique. They're called pseudo classes. I touch on them but I don't actually go into them.
>> Brian Holt: So I'll show you.
>> Brian Holt: That's not going to work. Anyway it has to do with this nth child selector, this is actually incorrect but that's what you're gonna use is you're gonna use colon nth child and in parenthesis you're gonna tell which one you want.

[00:06:51]
>> [INAUDIBLE].
>> Brian Holt: The nth leading paragraph well the child that is yeah so it becomes kind of a mess, right? Because we have different paragraphs in here, and we wouldn't necessarily be referring to the same one. So that's the general gist though is that you're gonna use an nth child pseudo-class.

[00:07:14] For what I would recommend while you're trying to wrap your mind all this CSS, is just give it a different class and style based on that class rather than trying to do relations.
>> Brian Holt: That tends to be more clear anyway. In fact I catch a lot of flack at that at Reddit because I use nth child a lot, yeah.

[00:07:34]
>> Speaker 3: What's the long form of the dot for class?
>> Brian Holt: The long form?
>> Speaker 3: Like would I just say class leading-p something instead of the dot?
>> Brian Holt: There is no long form?
>> Speaker 3: Okay, so I have to use the dot to refer to a class.
>> Brian Holt: Yeah, and it's just one of those things you just get used to.

[00:07:50]
>> Speaker 3: All right.
>> Brian Holt: Good question though. I like where your head's at, like trying to be succinct and that's a really good quality to be having as a programmer.
>> Brian Holt: Cool. Let's open another CodePen here.
>> Brian Holt: All right, expand out here, oops.
>> Brian Holt: Okay, so I believe this is just that one that you gave all the classes to earlier.

[00:08:31] Same HTML, right?
>> Brian Holt: Blog-post P Blog post, blog post title. This is just kind of an example of putting some concepts together. So here I have the blog post right, which is just everything, right, everything inside of a individual blog post. I gave it a border, which is this little black thing around it.

[00:08:55] I gave it some margin. And I gave it some padding. So margin and padding it's like something that confuses people for the longest time, it's okay if you find it a little bit confusing, we'll go over it several times. But essentially both of them are used for spacing.

[00:09:14] So in particular let's try taking out the margin bottom, for example. These are now going to bump up against each other, so now that line is solid. But as soon as I put that back there's going to be just that little bit of space between the two. Whereas the padding here, that's kind of like interior padding.

[00:09:38] So I have this blog post, and if I take this padding out everything the text is going to push against the walls, right? I don't want it to do that. I just want like a little bit of space to give it some more breathe, make it easier to read.

[00:09:55] So, again, margin is exterior, padding is interior, right? Again we'll go, I actually have a whole side, just talking about like all the different measurements that we have to worry about. And also don't worry like, you're seeing like border or margin bottom like you don't like to try and memorize this, they're just like don't try and memorize anything you can Google and find out in five seconds right.

[00:10:25] That's kinda my rule of thumb. [COUGH] Like for example like what are all the things I need for a border right? This is actually the shorthand for border but it's also the way that everyone rights it right. But you can also do like, border-color red and that's some like everything will be red.

[00:10:50]
>> Brian Holt: And again notice it says black right here and it says red right here, why it is? It's just lower in the CSS that's all.