6.4 How to be a good styling citizen - Video Tutorials & Practice Problems

<v ->We ended the last section</v> with a brief discussion of the importance of using simple selectors. In this section we'll talk more about how to do this in practice focusing especially on when to add new classes. Let's start by looking at these bio box styles. You might notice that we are styling the bio box link here. So Lee, why haven't we given this a class instead, in order to style it? <v ->So up to this point there's only been a single link</v> inside those bio boxes. And like we mentioned in section 2.2, you wanna think of your styling like legos. So, if things can be modular, if you know that there's only gonna be one link inside of a bio box, then it's very simple to just use a... style that is a class and then an element type inside of that, you don't need an extra class name to make things more specific. You can just leave it kind of generic like that. But if you get into a situation where the link that you have in the bio box is gonna be used, or the way that it looks is gonna be used in other parts of the site, or if you're gonna have multiple links in a bio box and one of them is different than others or multiple are different from others, that's the point where you need to start thinking about adding classes. <v ->Okay.</v> All right, let's look at some concrete examples. I'm gonna start by replacing the content of the page with something that's a little bit more descriptive. I suggest just copying and pasting. So I'm actually gonna copy and paste just the stuff inside the body. You're welcome to copy the whole thing but it's instructive to change the CSS by hand here. So this is this here. Yeah, And, You can take a look at what that looks like. And we're gonna clean up the CSS. If you look here, I've removed the ID on the div. So this exec bio is gone, we can get rid of it. And we're also not gonna have this alert. This is just an example. So all this stuff is stuff that we don't need at this point. And there we go, we just kind of pared it down and this probably won't change the appearance. Ah, just the width right? <v ->Right.</v> <v ->So,</v> At this point we're just gonna let it fill the full width. All right, So Where are we going with this now, Lee? <v ->So you'll notice that we have multiple links</v> in each bio box and we also have a Twitter link. If we look at the HTML, <v ->Right this is-</v> <v ->Right below the names there is a Twitter link.</v> <v ->Right.</v> <v Lee>And we want those social links to look different</v> or we will want those social links to look different. Further in the tutorial they're gonna look very different. They're gonna be a little graphical but right now what we're gonna do is at least change the color of them. <v ->Okay.</v> <v ->And just find a different way to target them.</v> Let's say, in this case that we wanna have these Twitter links be blue and the other links that are in the text in the bio boxes, all stay green. Now, one way that we can do that is we can target the links inside the bio boxes that are inside of paragraphs and make a more complicated style declaration <v ->Right. Like this.</v> <v ->Right. And, and change that to color green</v> and then change the original one that we did to blue. <v ->Well, okay.</v> So if we do this, do this here. <v ->Hey, I was doing something.</v> <v ->Okay. Yeah.</v> <v ->So if we do this</v> <v ->Ah, right</v> <v ->And then save that and refresh.</v> <v ->Got it.</v> <v ->Right.</v> Okay. So why is this not as good as an alternative that involves adding a new class? <v ->So the problem is</v> is that we're now styling links generically in two different ways and we're not really addressing what they're being used for. And the other thing is that we're getting dangerously close to reaching the limits of selector depth. This is a stylistic thing and a subjective thing but the idea is that you don't want to extend beyond three things in a selector. So in this case, we have bio box, the class we have 'p' the paragraph and then 'a' for the link. And if there were some reason, if if there was something inside of that link like an image or a span, and we had to, to target that that would be a fourth selector. And that's going a little bit too far. The reason why you don't wanna do this is that contrary to how you think that this might work CSS is actually applied from right to left. So if you have a a set of selectors that is really, really long what happens is it first applies that style to every single 'a' and then it looks through the page and finds every 'a' within a 'p' and then it finds every 'a' within a 'p' within a bio box. So the more that you do that the more your browser turns in trying to apply these styles and on a complicated site that can actually add a significant amount of page load time which you want to avoid. So when you start hitting that selector depth thing, you limit you should start thinking about using another class. <v ->Okay.</v> <v ->So, In our case here</v> one thing that we could do is we can add a new class to these Twitter links that are colored blue. <v ->Yeah. So we can do this.</v> This is our original. And then what we wanna do is add an an extra rule for just the Twitter links which means we should add a class. Do you prefer to add the class first? Or do you like to add the rule first? <v ->I like to add the class first.</v> <v ->Okay. That seems like it makes sense.</v> So let's, let's call them social links. Is that, is that... <v ->Yep. 'social-link'.</v> <v ->So social Link's good.</v> And we'll just add it to all of them. So this here and this, this, and then let's add So it's their bio boxes. <v ->Just try adding social link first.</v> <v ->Oh, it's just, it's just social link. Okay?</v> See what, see what happens there. And so are we doing social link without the 'a' right? <v ->Just to see that first.</v> <v ->Okay. So you want to do the color blue.</v> Okay. See if this works. Right. That did not work As Far as I can tell. <v ->And the reason that that didn't work</v> is not to harp on this too much, but bio box 'a' has a higher specificity. <v ->Right.</v> <v ->So you can see</v> that even though we've directly classed these links <v ->Yeah.</v> <v ->That higher specificity styling overrides it.</v> So one way that we could get rid of that is by adding 'a' at, at the beginning of social link. Okay. So now this will target all links that have the class social link and it'll make them blue. <v ->Right.</v> <v ->So there we go.</v> Look at that <v ->Right. So,</v> You might be asking like, why not just do that? It's a social link who cares about it. Right? But it's kind of a poor choice and this is gonna sound a little weird but there are many times where you are actually gonna wanna apply a class that applies to links to things that are not links. One, one case for or usage of this is in something like a menu where sometimes you'll have menu items that are not links because you don't want them to be clickable but you want them to have the style of a link because it, functionally is, it's just a a non it's, a disabled one is a better way to put it. <v ->Right. So like, like on a navigation menu</v> often there's a link for the current page but you don't want it to actually be a link. You just want it to look like a link. <v ->Right. Right.</v> Exactly. And, you know, we could get around this by removing that 'a' and adding back in bio box 'p a'. <v ->Alright.</v> <v ->To make the, the green, oh, no, not</v> we could add bio box 'p a'. <v ->Oh, I see there.</v> <v ->So now we've made</v> <v ->Ah, right</v> <v ->Now we've made the body copy links green</v> by getting them more specific. <v ->Right.</v> <v ->But you can see here that we're, we're starting to</v> bump up against that, that limit again. <v ->Yeah.</v> <v ->And like I was saying before, if you added</v> in an image inside of the links and then wanted to style that you'd be at four and... <v ->Right.</v> <v ->That's not such a good thing.</v> So one way around this is we can get more specific and we can add another class. <v ->Okay.</v> So what we could do is we could add a class directly on the 'p's, but then the problem becomes what happens if you have multiple 'p's you're gonna have to add that class over and over again. So, just to show you, right. <v ->Basically have to add it to all of these, if you</v> if you had a class here <v ->Right.</v> <v ->And now if in the same section you have another paragraph</v> You have to, So to keep the same styling across that, that's that's not so good. So an easier way to deal with this would be to add a new wrapper around the part that is the, the copy. <v ->Right.</v> <v ->The text of the biography.</v> And add a new div that just contains all of it. And then within that, we can target the 'p's separately. We can target the 'a's and then that'll be our, our touchpoint that class. So if we wrap it all in a div with the class of bio copy. <v ->Yeah. So we, we're gonna get rid of this 'p'.</v> Is that right? <v ->Correct. We're just gonna get rid of that whole thing, but</v> <v ->Okay. But yeah, for now,</v> so we're gonna do div actually, there's a, there's a shortcut for this. What's the class gonna be? It's gonna be bio copy. <v ->'bio-copy'. Correct.</v> <v ->Yeah. There we go.</v> Like that. And then I'm gonna indent this here. <v ->Proper indenting is very important.</v> <v ->Yeah. By the way, I usually care a lot</v> about the ad column width, but not for HTML cause it's just impossible in general teams. <v ->Yeah.</v> <v ->Okay. So we can copy this.</v> I just have word wrap on usually. So is this yeah, this is just the copy. So do this here and we can see from the indentation that we need to closing div here there are other ways to do this but I just wanna do it by hand. This. Okay. And all right, so now we've added these classes but it hasn't done anything yet. So what do we wanna do in terms of, so targeting them <v ->Let's change bio box 'a'</v> to bio copy 'a' <v ->Ah, right.</v> Right, So now this is targeting the links like inside I guess it's just my bio that has links inside it it's targeting these links here. <v ->Right.</v> <v ->Because they're inside this div.</v> <v ->Exactly.</v> <v ->And then the social links will still be blue</v> <v ->Without needing to add in the 'a' attached</v> to the class name to get that higher specificity. <v ->Okay.</v> <v ->So now let's take a look at that.</v> <v ->It'll look like how we had it.</v> <v ->Yeah.</v> <v ->But things are more modular now</v> and we can treat what's going on within the bio copy in a totally different way. <v ->Right.</v> All right, This looks like it's working. There's just one more thing. That is a good idea to add. You'll notice that each of these belongs logically in one or another category. So for example, this top one here is really a global style role that applies to the entire page. And it would be nice to be able to indicate that. So, a good practice is to add in a comment. So this is a CSS comment, not an HTML comment and the CSS comments you can insert like this it's a '/*' and then the comment and then you close it with the same thing. And so let's call this global styles. Do you usually like to use all caps for this, Lee? <v ->I do.</v> Just to make it a little bit more apparent. And then the other thing that we should do here is move the social link style up underneath the global style. So what I, the, the way that I usually like to format this is that the global stuff goes first and then things that are more specific. So things that have classes. <v ->Right.</v> <v ->Go after that.</v> But, these are all things that that can be found anywhere on the site potentially. And then last will be modules. So the bio boxes and the styles for that would go after that. <v ->Okay.</v> So these are bio styles. Now, do you care about new lines or do you prefer to have them or not have them? Does it really matter? <v ->I like having them just to break up the visual flow.</v> Especially as a style sheet gets longer and longer. <v ->Great. So even with this small number of rules</v> it's really nice to have this separation where we see that these are global styles, styles specific to these social links and then styles specific to the the bio boxes and the bio copy. So, So we can see even just with this small number of rules it actually does make a lot of sense to organize them this way. Just do one more refresh and make sure it's working. Looks great. Now that we've reached a natural stopping place. This is a good time to make a git commit and publish our results to GitHub pages. The tutorial mainly leaves you on your own at this point because we're assuming that you have a background now in things like GIT and HTML and GitHub pages and so on. So the text actually doesn't talk about every single time you should make a commit and so on. But as we're doing these videos we do want to show you the way we would really do things. And this is a natural stopping place. So this is the point where I would definitely make a commit and, and push it up just to see what it looks like. Good. So what do we do here? We added extra content and organized our styles. That's a good, that's a good commit message. That's good enough. Take a look. Sometimes it takes just a second. We're on the right branch here. It's on the master branch. Oh, there we go. So sometimes it takes a couple minutes for GitHub pages to rebuild things. And in this case probably clearing some cache somewhere. Like we said, cache and validation is a hard problem, but here we go. So now on the live web, we've got our website and should look just the same. Great.