Обязательно ли в БЭМ элементу иметь класс block_el, чтобы использовать модификатор block_el_mod(scss)?

Question

[Артём]

Допустим вот код

<div class="result-box">
  <div class="result-box__info">
    <span class="result-box__text">Name</span>
    <span class="result-box__text">Surname</span>
    <span class="result-box__text">Age</span>
  </div>

  <div class="result-box__description">
    <span class="result-box__text_gray">Know: js, sass</span>
  </div>
</div>

@mixin textStyle($size: $defaultFontSize, $color: black, $weigth:normal) {
  color:$color;
  font-size:$size;
  font-weight: $weigth;
   font-family: serif;
}
.result-box {
  overflow: hidden;
  display: grid;
  &__text {
    @include textStyle($weigth: bold)
  }
  &__text_gray {
    @include textStyle($size :1rem, $color: gray);
 }
}

Можно ли сделать как я сделал я? В блоке result-box__description находится span, которому я задал
чисто класс с модификатором result-box__text_gray, без основного result-box__text, ибо у них нет ничего общего. Или как нужно в таких случаях делать.
И нормальный-ли миксин я написал?

Answer 1

[Ankhena]

Модификатор не может быть единственным классом, он всегда сопровождает класс блока или элемента.
Иначе он перестанет быть модификатором в прямом смысле этого слова.

Comments

[Артём]

Хорошо, а тогда стоит-ли большую часть элементов блока тоже делать самостоятельными блоками?
Например
Из такого

<div class="result-box__video-info " >
        <div class="result-box__author">
          <img src="src/views/images/result-box/user-icon.png" class="img-responsive" alt="user">
          <span class="result-box__text_hover result-box__text_bold">${data.channelTitle[i]}</span>
        </div>
        <div class="result-box__date">
          <img src="src/views/images/result-box/Без имени-1.png"class="img-responsive" alt="calendar">
          <span class="result-box__text_hover result-box__text_bold">${data.clipDate[i]}</span>
        </div>

Делать такое

<div class="result-box__video-info  video-info" >
        <div class="video-info__author">
          <img src="src/views/images/result-box/user-icon.png" class="img-responsive" alt="user">
          <span class="video-info__text video-info__text_hover result-box__text_bold">${data.channelTitle[i]}</span>
        </div>
        <div class="video-info__date">
          <img src="src/views/images/result-box/Без имени-1.png"class="img-responsive" alt="calendar">
          <span class="video-info__text video-info__text_hover video-info__text_bold">${data.clipDate[i]}</span>
        </div>

[Ankhena]

Артём, как вам удобнее и смотря что в макете. Если эти сущности могут жить на странице без блока result-box или мигрировать в другой блок, то почему нет.
Помня о том, что к блоку можно применять не все свойства css.

[Артём]

Ankhena, а по поводу директорий. На каждом проекте с использованием методологии бэм действительно под каждый бэм блок и элемент/модификатор создается своя папка и файл, даже с учетом что в файле может быть 1 строчка кода?

[Ankhena]

Артём, никто не заставляет вас использовать все идеи какой-либо методологии.
В большинстве случаев народ использует лишь БЭМ нейминг и прекрасно задает display и margin блокам, не заморачиваясь.

[Артём]

Ankhena, спасибо