V
V
Valentin Popov2020-10-01 16:02:10
css
Valentin Popov, 2020-10-01 16:02:10

Correct way to override styles for BEM blocks?

I have two blocks, they are very similar to each other, only on the mobile version one block should be with elements in one column, and the other block in two columns. Am I correct to modify these blocks with such markup according to the bam name:

Initially, the block has the following markup:

<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>


I redefine the second block like this:
<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>

Is my choice correct or not?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question