Правильный способ переопределения стилей у БЭМ блоков?

Question

[Валентин Попов]

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

Изначально у блока такая разметка:

<div class="tools">
                    <div class="tools__item">
                        <div class="tools__icon">
                            <img src="img/tools-1.svg" alt="">
                        </div>
                        <div class="tools__name">Конкурентная среда</div>
                    </div>
                    <div class="tools__item">
                        <div class="tools__icon">
                        <img src="img/tools-2.svg" alt="">
                        </div>
                        <div class="tools__name">Качество сайта</div>
                    </div>
                    <div class="tools__item">
                        <div class="tools__icon">
                        <img src="img/tools-3.svg" alt="">
                        </div>
                        <div class="tools__name">Разработка стратегии</div>
                    </div>
                  </div>

Второй блок я переопределяю так:

<div class="tools tools--two-columns">
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-1.png" alt="">
                </div>
                <div class="tools__name">Естественная выдача</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-5.svg" alt="">
                </div>
                <div class="tools__name">Целевой трафик</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-2.png" alt="">
                </div>
                <div class="tools__name">Доверие пользователей</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-2.svg" alt="">
                </div>
                <div class="tools__name">Качество сайта</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/tools-3.svg" alt="">
                </div>
                <div class="tools__name">Высокая конверсия</div>
              </div>
              <div class="tools__item tools--two-columns__item">
                <div class="tools__icon tools--two-columns__icon">
                  <img src="img/seo-3.png" alt="">
                </div>
                <div class="tools__name">Долговременный результат</div>
              </div>
            </div>

Верным ли является мой вариант или нет?

Comments

[Ankhena]

tools--two-columns__item

Элемент модификатора?
Так не бывает.

Из вашего вопроса вообще не понятно, зачем модификаторы элементам?
Что в них меняется из-за того, что они теперь в 2 колонки, а не в 1?

[Валентин Попов]

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

[Валентин Попов]

Вот так я могу сделать? Повесить на блок модификатор tools--two-columns и в css прописывать стили так:

.tools {
 &__item {
     width: 100%;
 }
}
.tools {
   &--two-columns {
      .tools__item { width:50%}
 }

[Валентин Попов]

Ankhena, Вот так я могу сделать? Повесить на блок модификатор tools--two-columns и в css прописывать стили так:

.tools {
 &__item {
     width: 100%;
 }
}
.tools {
   &--two-columns {
      .tools__item { width:50%}
 }

[Ankhena]

Валентин Попов,
Да, можете, но зачем такой огород?

.tools--two-columns {
display: grid;
grid-template-columns: repeat(2, 1fr)
}

или так, если не грид.

.tools__item {
само займет 100%
}
.tools__item--50 {
width: 50%;
}

[Виталий Першин]

Лучше бы вы скрины показали, в любом случае ваше решение неправильно