BEM Mixins8:20 with Guil Hernandez
Using Sass' ability to generate BEM selectors with &-suffix naming conventions, let's create a handy mixin for writing BEM selectors!
So knowing what we now know about the BEM naming convention and Sass's ability to 0:00 generate BEM selectors with an ampersand and a suffix, let's take things a step 0:04 further by creating a mixin that makes writing BEM selectors a little easier. 0:10 So we'll go over to the utilities partial. 0:16 And at the bottom of the file, we should see this comment for BEM selectors. 0:19 So first, we'll create a mixin for styling elements inside a block. 0:24 So, let's say, @mixin and we'll call it e for element. 0:29 Then, we'll need to pass the element selector name as the argument. 0:38 So, inside the parentheses, we'll create the variable element as our argument. 0:42 So, we know that these sub-components or 0:50 child elements get prepended with two underscores. 0:52 So, we'll use the ampersand and a double underscore to generate 0:56 an element selector based on the parent and the value passed for element. 1:01 So again, we're using interpolation syntax to 1:08 output the selector with this element variable. 1:11 So then I'll go ahead and add the content directive inside of the rule. 1:18 This way we're able to pass more styles to this mixin when we include it in a rule. 1:23 So next, I'll just go ahead and copy the mixin we just wrote and paste 1:29 it right below, because we're going to use this mixin to create our modifier mixin. 1:35 So first, we'll create the modifier mixin by giving it the name m for modifier. 1:41 And this time we'll need to pass the modifier name as the argument. 1:47 So instead of element, we'll say modifier. 1:50 Now, as we know by now, modifier selectors get prepended with two hyphens. 1:54 So, we'll replace the double underscore with the two hyphens. 1:59 Then, we'll need to change the selector variable here to modifier. 2:03 So now let's go ahead and save our utilities file and go over to 2:09 our nav partial, and let's include the mixins we just wrote in our nav rule here. 2:12 In our element selector, instead of using the ampersand double 2:17 under score we can say, include e for the element selector. 2:23 Then pass item as the element name. 2:28 And again, for our modifier selector, instead of ampersand, dash, dash current, 2:31 we can replace that by including the modifier mixin. 2:38 And passing current as the modifier. 2:43 And I'll just go ahead and nest the anchor rule inside. 2:48 So now we can save our nav partial and bring up our CSS output. 2:53 And as we can see here, at the bottom of our CSS file, 2:59 it returns this same CSS output as before. 3:02 So now, for BEM naming, we can stick with these mixins, 3:06 because they feel a little more descriptive and intuitive. 3:10 So, when writing modular rules with SAS, we can also take advantage of 3:14 placeholder selectors to keep our SAS rules drier and a little more compact. 3:18 Now, one of the biggest advantages of using placeholder selectors with BEM 3:24 is that we're also able to extend an element's base styles from any rule. 3:28 And this is especially useful for modifier elements, because it can 3:34 prevent us from having to define both the element and modifier class in the markup. 3:39 Like we're doing here with nav__item and nav__item--current. 3:44 So it's nice to be able to simply define a nav__item--current class in the markup and 3:48 have it inherit all the base styles from nav__item. 3:54 So let's go ahead and do that. 3:58 Let's bring up the extends.scss partial, 4:00 which already contains a few placeholder selectors for buttons. 4:03 And right below, you should see this Nav Items comment, and 4:08 this is where we're gonna create our nav item placeholders. 4:12 So first, we'll create one called %nav-item-disp, and 4:15 this is gonna contain all the display styles for our nav items. 4:20 So what I'll do is go over to nav.scss and 4:24 copy the display and margin properties from the nav item rule here. 4:30 And I'll go back to the extends.scss partial and 4:35 paste those properties inside of %nav-item-disp. 4:39 Okay? So next, we'll create another placeholder. 4:43 This time we'll call it %nav-item-link and this will be for the links in our nav. 4:46 So I'll go back to nav.scss and copy all the properties inside 4:53 this nested a rule, and just paste them in our placeholder. 4:59 And we're actually gonna need every property except for the color property and 5:06 we'll see why in just a bit, so 5:10 I'll just go ahead and delete it from this placeholder. 5:12 Okay, so finally we'll create one more placeholder rule and 5:15 we'll call the selector, %nav-item-on. 5:21 And now just go ahead and copy the color and order color declarations in 5:26 our current modifier rule, and paste them inside our %nav-item-on placeholder. 5:31 Okay. So now that we've abstracted all the base 5:37 styles into placeholder selectors, we can extend them wherever necessary. 5:40 So back in our nav component rule, 5:45 we'll need to extend some of those placeholders we just wrote. 5:48 So, first, inside the nav item rule, 5:52 we can actually get rid of the display and margin declarations. 5:56 And now we can extend the %nav-item-disp placeholder. 6:00 So, I'll say, extend. 6:05 [SOUND] So next, I'll just go ahead and 6:06 copy this extend directive. 6:12 And right below in our anchor element rule, I will go ahead and remove the font 6:16 size and font weight declarations and everything below the color property. 6:21 That's the only one we are going to keep, and 6:26 this time we are going to extend the %nav-item-link placeholder. 6:27 So what we'll do next is create a hover rule for our links. 6:31 So I'm going to nest a new selector using &hover. 6:36 And in our hover rule, we're going to extend the %nav-item-on placeholder. 6:40 So finally, we'll go down to our current modifier rule here. 6:48 And the first thing we'll do is extend %nav-item-disp. 6:52 And inside the a rule, let's extend %nav-item-link. 6:57 So, I'll just copy it from the rule above and we'll remove the color and 7:03 border declarations. 7:07 And let's also extend %nav-item-on. 7:09 [NOISE] All right. 7:16 So now we should only be left with this color declarations, and 7:19 the rest are our placeholder extends. 7:24 So as we can see, this makes our nav component rule look a lot cleaner. 7:28 And now we can go back to our markup and remove the nav__item at the base 7:33 class from the current item leaving the modifier class only. 7:37 So when we save our index file and go back to the browser preview, and 7:43 refresh, we can see that everything still looks the same. 7:48 So that's great. 7:51 And in the CSS output, notice how our selectors are all 7:52 nicely grouped without repeating any CSS properties. 7:56 So as we can see, modular CSS is all about abstraction. 8:00 We're grouping selectors that share common base styles with placeholders. 8:05 Then, in separate rules, we're defining the differences and variations. 8:10 So next, we'll see how to apply these concepts to web typography layout. 8:15
You need to sign up for Treehouse in order to download course files.Sign up