Как правильнее записывать bem модификатор?

Question

[wakenbyWork]

Есть обычно блок, с элементами и модификаторами, я его описываю по такой очередности: https://nicothin.pro/idiomatic-pre-CSS/

Скрин с правилами:

И возник вопрос как лучше писать модификаторы со значениями?

Вот пример блока с элементами:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}
}

И два варианта записи.

Вариант 1:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}

  &--theme--blue {
    /* ... */
  }

  &--theme--white {
    /* ... */
  }

  &--size--big {
    /* ... */
  }

  &--size--small {
    /* ... */
  }
}

Вариант 2:

.header {
  /* ... */

  &__left {/* ... */}

  &__right {/* ... */}

  &--theme {
    &--blue {
      /* ... */
    }

    &--white {
      /* ... */
    }
  }

  &--size {
    &--big {
      /* ... */
    }

    &--small {
      /* ... */
    }
  }
}

Как лучше писать --mod-name--mod-value в scss?

Comments

[Ankhena]

Я могу внятно объяснить, почему может быть неудобно писать элементы, как у вас в примере. Потому что это затрудняет поиск по проекту.

Этот же аргумент можно применить и к вашему второму варианту. Если разных модификаторов много и их значения могут повторяться, то запись такого вида --size--small найти проще, чем отдельно size, отдельно small.

Answer 1

[Максим Морев]

Исключительно первый вариант.

Я понимаю, откуда ноги растут у второго - и это действительно может показаться неплохой идеей на стадии на разработки, DRY и властвуй, все дела, но на стадии дальнейшей поддержки гораздо важнее иметь возможность в два (максимум - три, но это редкость) приёма найти в проекте нужные стили, а этого можно достичь только тем, что держать структуру максимально плоской, без ненужной вложенности.

Видим класс some-block__el--theme-dark, надо найти стили:

1. Вычленяем название блока - переходим к файлу, в котором находятся стили блока (`some-block.scss`)
   
2. Далее либо `Ctrl+F` по модификатору `--theme-dark` (чаще всего)
   
3. Либо сначала к `Ctrl+F` элементу `__el` и внутри находим модификатор
   

Какой алгоритм выбора между 2 и 3 - не знаю, это где-то на уровне профессиональной интуиции, со временем приходит ощущение.

В случае же второго варианта искать придётся по кусочкам, и при этом никакой гарантии что значения не пересекаются в рамках разных названий модификаторов.
Поэтому структура максимально плоская, просто для того, чтобы при поиске внутри файла сразу находить нужное.
Ровно по той же причине, кстати, медиа-запросы прописываются внутри элементов, а не отдельным блоком.

P.S. Из этого можно заключить, что "а давайте вообще откажемся от нестинга и будем искать в один приём сразу по классу целиком".
Есть те, кто разделяют это мнение. Я категорически не разделяю, но это тема для отдельной дискуссии. :)
Вам советую остановиться на том, что нестинг отдельных БЭМ-сущностей (элементов и модификаторов) - хорошая идея, а нестинг для композиции БЭМ-сущностей - не очень хорошая :)

P.P.S. И лучше для разделителя между модификатором и его значением использовать что-то отличное от префикса самого модификатора - меньше в глазах рябить будет, когда модификаторов станет 3-4 штуки на одном элементе ^^

Comments

[wakenbyWork]

Спасибо за развернутый ответ! Я тоже к этому склонялся, но хотелось услышать еще мнения по этому поводу)

Answer 2

[Александр Васильев]

Добрый день.
Я предпочитаю не отходить от "классического" синтаксиса. b__e_m, это позволяет выделять копируемое название класса даблкликом.
Работая в pug, большое количество "минусов" будет рябить, не уверен, что отработает нормально короткая запись, хотя может в настройках и есть. Но тут дело привычки.

spoiler

Ну и если имена классов используются в качестве переменных где-нибудь в Fenom, то понятно, что ни о каких "минусах" и речи быть не может.

Comments

[Ankhena]

Вопрос ведь не об этом, а о модификаторах со значениями и синтаксисе scss.

[Александр Васильев]

да понятно. Просто для меня несколько диковато видеть модификаторы, отделенные двумя "минусами"

[Ankhena]

Александр Васильев, это вопросы вкуса, БЭМ это позволяет и многим нравится так писать (мне в том числе).
У вас получился комментарий, а не ответ.

[Александр Васильев]

Ankhena, да-да, сорян, перенесите, если есть возможность.

[Ankhena]

Александр Васильев, я не модератор. Вы можете сделать это самостоятельно :)