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 использовать в любом месте верстки.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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