Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Sass and BEM Headline Modifiers

Lisa Drevillon
seal-mask
.a{fill-rule:evenodd;}techdegree
Lisa Drevillon
Front End Web Development Techdegree Student 7,581 Points
Posted by Lisa Drevillon
.a{fill-rule:evenodd;}techdegree
Lisa Drevillon
Front End Web Development Techdegree Student 7,581 Points

extra code

.headline {

&-primary {

 @include m(grouped) {
  @extend %hdln-prim;
  margin-bottom: 0;
  }   

  @extend %hdln-prim;  
  margin-bottom: em(70px, 42px);
  }

&-secondary {

  @include m(grouped){
    @extend %hdln-sec;
    margin-top: em(10px, 24px);
    margin-bottom: em(54px, 24px);
   }

  @extend %hdln-sec;
  margin-bottom: em(22px, 24px);
  }
}

In regards to the above, can someone please explain the logic behind the second part of code under:

&-primary:
@extend %hdln-prim;  
  margin-bottom: em(70px, 42px);
  }

 &-secondary: 
 @extend %hdln-sec;
  margin-bottom: em(22px, 24px);
  }

Why is the second part there? Doesn't the first part (.headline-primary grouped and .headline-primary-secondary grouped) suffice or override the second part?

2 Answers

Jay P
Jay P
12,361 Points
Jay P
Jay P
12,361 Points

Hi Lisa, I think they are separate selectors. We are targeting 4 selectors: .headline-primary, .headline-primary--grouped, .headline-secondary, and .headline-secondary--grouped.

Both .headline-primary and .headline-primary--grouped extended the styles from the placeholder selector %hdln-prim. Now .headline-primary adds a bottom margin of em(70px, 42px); while .headline-primary--grouped adds a bottom margin of 0.

The same thing goes with .headline-secondary and .headline-secondary--grouped where they both extended %hdln-sec as base styles. Now .headline-secondary adds a bottom margin of em(22px, 24px); while .headline-secondary--grouped adds top and bottom margin of em(10px, 24px) and em(54px, 24px), respectively.

This can be observed more closely in your application.css output. Not sure if I have answered your question, but I hope it helps.