Объявление переменных Sass по методологии БЭМ

Я пытаюсь внедрить методологию БЭМ в свои переменные sass.

// 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;
}...

Является ли это хорошим подходом к методологии БЭМ?

Даже если я собираюсь использовать переменную цвета для разных блоков (тело, заголовок...), должен ли я добавлять какой-либо блок при объявлении переменной цвета?


variables sass bem
person Alberto Marin    schedule 01.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если помогает организовать и стандартизировать ваш код, это хороший подход, вместо этого, если вы считаете, что это не нужно, вы можете использовать другое соглашение.

Например, я использую БЭМ в разметке:

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

В именовании переменных я не чувствую себя полезным, будучи таким подробным и строгим, и я использую просто

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

Но может зависеть и от сложности проекта, над которым вы работаете.

person cesare    schedule 01.04.2017
comment
Большое спасибо. Кстати, я только что обнаружил, что еще один человек сходит с ума от объявлений sass и этого соглашения http://www.juliecameron.com/blog/2013/11/06/bem-naming-for-sass-color-variables-what1./ - person Alberto Marin; 01.04.2017
comment
@cesare Плохая идея называть переменные таким образом. Что, если семейство шрифтов изменится на Arial? Но переменная по-прежнему имеет имя $roboto. Итак, $red -> $color, $roboto -> $font-family. Имена должны быть максимально абстрактными. - person 3rdthemagical; 04.04.2017
comment
Конечно, если у меня есть проект, в котором есть возможность изменить шрифты или цвета, я создаю более абстрактный слой переменных: $borderColor : $red, $copyFont: $arial и так далее... - person cesare; 04.04.2017