Gal Gal - 2 months ago 11
Sass (Sass) Question

BEM & Sass - how to approach a basic, global "style guide"-type rules?

I'm using BEM for everything and appreciating the advantages.

There is a basic global style guide provided by the designers, including


  • Header1

  • Header2

  • body text

  • primary button

  • secondary button



(and a few other things).

My instinct is to create SASS rules for these, and then pull them into BEM blocks as necessary.

For example, header1 would be:

@mixin header1 {
font-size: 24px;
font-family: 'Gotham';
font-color: '#e3e3e3';
}


then my BEM block could be:

pane {
&__title {
@include header1;
}
}

form {
&__overview {
@include header1;
}
}


The alternatives are:


  1. Repeat the rules for header1 inline
    (duplicative. conforms to BEM's everything is a flat module)

  2. create a BEM block named "header1" and do a BEM mix in the markup
    (would always go with the same BEM elements, so seems like not the correct path)



What is your approach to this? Is this approach contrary to the spirit of BEM?

Answer

I use a placeholder for header1

%header1 {
  font-size: 24px;
  font-family: 'Gotham';
  font-color: '#e3e3e3';
}

and extend classes to this 'abstract' selector

pane {
  &__title {
    @extend header1;
  }
}

form {
  &__overview {
    @extend header1;
  }
}