0

I am trying to implement the BEM methodology to my sass variables.

// Variables
  // Colors
  $color--blue--light: #3696D1; 
  $color--grey: #2D4452;
  ...
  // Fonts
  $body__font--sans-serif--roboto: 'Roboto', sans-serif;
  ...

/* Global */

body {
  font-family: $body__font--sans-serif--roboto;
  background-color: $color--blue--light;
  color: $color--grey;
}...

Is this one a good approach to the BEM methodology?

Even I am going to use the color variable for different blocks (body, header...), should I add any block when declaring the color variable?

3rdthemagical
  • 5,271
  • 18
  • 36
Alberto Marin
  • 101
  • 1
  • 10

1 Answers1

1

If helps to organize and standardize your code is a good approach, instead if You feel it's unnecessary You could use another convention.

For example I use BEM in markup:

<div class="myBtnClass myBtnClass--blue">
     <div class="myBtnClass__inner">
      etc etc etc

In variables naming I don't feel helpful being so verbose and strict and I use simply

 $red: #cc0000;
 $roboto: 'Roboto', sans-serif;

But can depend also on the complexity of project You are working on.

cesare
  • 2,098
  • 19
  • 29
  • Thank you so much. Btw I just found another person getting crazy with sass declarations and this convention [http://www.juliecameron.com/blog/2013/11/06/bem-naming-for-sass-color-variables-what1/](http://www.juliecameron.com/blog/2013/11/06/bem-naming-for-sass-color-variables-what1/) – Alberto Marin Apr 01 '17 at 20:33
  • @cesare It's bad idea to name variables this way. What if font family changes to Arial? But variable still has name `$roboto`. So, `$red` -> `$color`, `$roboto` -> `$font-family`. Names must be as abstract as it's possible. – 3rdthemagical Apr 04 '17 at 10:39
  • Sure if I have a project where there is chance to change fonts or colors, I create a more abstract layer of variables: `$borderColor : $red`, `$copyFont: $arial`, and so... – cesare Apr 04 '17 at 12:29