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

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

Изначально у блока такая разметка:
<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>

Верным ли является мой вариант или нет?
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы