Nesting Selectors

With Sass, we're able to nest selectors in the same visual hierarchy of our HTML. 0:00 So now we're gonna look for areas where it makes sense to nest Sass rules. 0:05 Now, a common misconception a lot of us just starting out with Sass may have 0:10 is that we must nest all the things, right? 0:14 So for example, and this is just an example, we might create a rule like this. 0:17 So let's say secondary-content. 0:21 [BLANK_AUDIO] 0:24 Then inside secondary-content, we'll nest another rule, so let's say resorts. 0:26 Then inside resorts, we'll nest another rule, so let's say ul. 0:31 And then inside this rule is where we'll, for example, declare our color value. 0:36 So now we may be like, hey, this is great. 0:42 I'm writing Sass. 0:44 Well, this kind of nesting isn't always cool because one of the biggest mistakes 0:46 we can make is nest styles that do not need to be nested, 0:50 because it can produce really long selector chains and 0:54 create lots of needless specificity in our selectors. 0:57 We may think that it allows for better code organization, 1:02 which it does in some cases. 1:05 But really, lots of nesting equals bloat. 1:06 Now, the good thing is that we originally wrote our CSS without any 1:10 parent dependencies, so we don't really need to nest selectors here. 1:14 So, that's why usually try to avoid nesting unless it makes sense, and 1:18 I'll show you where it makes sense to nest rules in our project. 1:22 So here in our base.scss partial, the first place where it might make 1:26 sense to nest rules is down below in our link rules. 1:31 So with Sass, we can reference the current parent selector in a nested rule 1:37 using the ampersand symbol, 1:42 as we saw in the previous video when we built that clearfix placeholder. 1:44 So first, let's create a new rule that targets the a or anchor element. 1:48 So we're gonna type a followed by a set of curly braces. 1:55 Then, inside this rule we're going to nest the rules for link, visited and hover. 1:59 I'm actually gonna remove the active state from our project, but 2:05 you can leave it in if you want. 2:07 So I'm just gonna delete active, and I'm gonna go ahead and 2:09 select and cut the link, visited, and hover rules. 2:13 Then paste them inside the new a rule. 2:17 Let me clean things up a little bit. 2:22 [BLANK_AUDIO] 2:23 And now, to reference the parent selector in this rule, 2:27 we can replace the a selector and all the nested rules with the ampersand. 2:31 [BLANK_AUDIO] 2:37 And once we save and compile our Sass, 2:41 let's open up our application.css file, so our CSS output. 2:44 And when we scroll down, we can see how Sass outputs them as separate rules. 2:49 So now you may be thinking, well, isn't that what we already had to begin with? 2:55 Why did we have to rewrite everything just so 2:59 we can output what we'd already written? 3:01 And that is a valid point. 3:04 Now, even though we're not nesting these rules to mimic any sort of 3:06 HTML hierarchy or because there is a parent dependency, I still like to keep 3:10 these related selectors nicely organized under one rule whenever possible. 3:15 So, in Sass we can now use a parent selector to append a suffix to a selector. 3:21 And this is especially useful when working with named space class selectors. 3:28 So for instance, inside the components directory, 3:32 we'll bring up the typography partial. 3:37 And when we scroll down, we can see how we have 3:40 classes with the name main-heading and main-title. 3:43 So, we can actually nest rules under this 3:48 main namespace similar to how we defined our link rules. 3:51 Now, this is just a simple example, but 3:56 in a larger project, we may have a long list of namespace rules. 3:58 So, we can make things a little more modular and maintainable with nesting. 4:02 So first, I'm going to create a new rule with the class selector main. 4:07 And I'm going to select and cut the main-title and 4:14 main-heading rules, and paste them inside this new rule. 4:18 [BLANK_AUDIO] 4:24 Let me just move this down so we can see this a little better. 4:29 And now we can replace the main classes in our nested rules with the ampersand. 4:33 So first I'm going to replace .main-heading with &-heading, and right 4:39 below that, I'm going to replace main in the main-title class with an ampersand. 4:44 All right, so now if we save and compile our Sass and bring up our output CSS, 4:51 wes ee how that ampersand selector sort of undoes the nesting in the Sass rules and 4:57 outputs them as separate selectors without making them descendents of any selector, 5:03 as we can see here. 5:08 So remember, don't nest everything into everything just because you can. 5:09 Or don't just nest because it's a cool Sass thing to do. 5:15 Only nest if it makes sense. 5:19