0

Есть код:

<section class="head-slider">
  <div class="container">
    <div class="head-slider__slider">
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <svg class='underline'>
            <use xlink:href='img/sprite.svg#mobile'/>
          </svg>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
      <div class="slider__slide">
        <div class="slide__slide-header">
          <h2>Expire</h2>
          <object data="" type=""></object>
        </div>
        <div class="slide__slide-description">
          <p>Professionaly designed, carefully made for your enjoyement</p>
        </div>
        <div class="slide__slide-buttons">
          <a href="#">Explore</a>
          <a href="#">Learn more</a>
        </div>
      </div>
      <!--slide-end-->
    </div>
  </div>
</section>

Присутствует такой класс .slider__slide, но в дальнейшей верстке на такой класс можно выйти еще несколько раз, когда добавляешь еще слайдеры. Где я допускаю ошибку в именовании классов?

2 ответа 2

1

Если вы знаете, что блок или предполагаемый элемент будет использоваться в других местах и в другом окружении, то необходимо делать этот блок отдельно и именовать независимо от окружения. То есть ваш .slider__slide может называться например slide-container, а сам slider__slide может быть миксом в данном окружении вместо модификатора и называться slider__slide-container в блоке slider, но у вас его нет...

В целом по вашей разметки понятно, что вы не поняли методологию БЭМ. Ваш элемент slider__slide является элементом какого блока по вашей версии? По методологии он должен являться элементом блока slider, которого у вас нет. slide__slide-header должен быть элементом блока slide, которого у вас тоже нет.

В общих чертах ваши классы должны именоваться примерно так:

slider
slider__container
slider__slide
slider__item
slider__head
slider__header
slider__title
slider__description
slider__buttons

И неважно насколько глубоко вложены ваши блоки друг в друга. Сейчас у вас допустим в элементе slider__container находятся:

slider__title
slider__description
slider__buttons

И методология БЭМ подразумевает, что вы можете достать из этого элемента другой элемент, например slider__title и поставить его рядом на одном уровне. При этом вы не потеряете связи. Сейчас у вас в разметке какая-то тавтология и похоже, что вы пытаетесь для каждого элемента определить родителя и завязываетесь на иерархию, на каскад именнований от которого, как раз и необходимо избавляться.

Дефис в классическом БЭМ не разделяет элементы и блоки, это просто имя из двух и более слов, Например: Мой-Блок__мой-Элемент_мой-Модификатор

-1

Добавь элементу .head-slider__slider класс .slider и получишь правильный БЭМ. Теперь через класс .head-slider__sliderсможешь задавать внешнюю геометрию в блоке .head-slider, а блок .slide использовать в любом месте верстки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.