Как правильно назвать классы этого слайдера по БЭМ?

Question

[mukzer]

как правильно назвать классы по БЭМ, для этого слайдера?


Вот что я написал, но мне кажется что это не совсем правильно, плюс ещё большие классы...

<section class="goods section-outer">
                    <div class="container">
                        <div class="goods-inner">

                            <div class="goods-slider">

                                <div class="goodsMainSlider-container">
                                    <div class="goodsMainSlider-wrapper swiper-wrapper">

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                        <div class="goodsMainSlider__item">
                                            <img class="goodsMainSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                    </div>
                                </div>
    
                                <div class="goodsSecondSlider-container">
                                    <div class="goodsSecondSlider-wrapper swiper-wrapper">

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                        <div class="goodsSecondSlider__item">
                                            <img class="goodsSecondSlider__item-img swiper-slide" src="" alt="">
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </section>

Comments

[Вадим]

Сегодня у Вас это слайдер товаров, а завтра слайдер процесса выполненных работ.
Как по мне, называть слайдер по тематике используемых в нём изображений - не корректно.
То есть goods - убираем.

Что вместо него - что-то абстрактное. Скажем, presentation-slider

Далее, почему у Вас всё такое не консистентное? Какой нотации именования Вы придерживаетесь?
То слова через тире, то camelCase.

У Вас тут нет second слайдера. Да и в целом по бэму привязываться к позиции - такое себе. Крайний случай - в модификаторе, но никак не в названии блока.
У Вас тут главная картинка и миниатюрки-превью, которые принято называть thumbs.

Каждая картинка обёрнута в див. Точно надо?
Если да, то получается, что slide у Вас не картинка, а div, в который она обёрнута.

Итого:

<section class="section section_outer"> <!-- У Вас есть бэм блок section, у него есть модификатор outer.-->
  <div class="container">
    <div class="section__inner">
      <div class="presentation-slider"> <!-- группа, включающая в себя 2 слайдера, тем самым создавая отдельный блок -->
        <div class="presentation-slider__main main-slider"> <!-- бэм микс. Тут у нас и самостоятельный блок main-slider и дочерний элемент main у presentation-slider. Именно в дочернем элементе должны задаваться стили, отвечающие за внешнюю геометрию и специфическое оформление, не имеющее к слайдеру отношения. main-slider же самостоятельный блок слайдера, который должно быть можно спокойно переносит и реиспользовать в любом месте сайта. -->
          <div class="main-slider__wrapper swiper-wrapper"> 
              <img class="main-slider__slide swiper-slide" src="" alt="">
              <img class="main-slider__slide swiper-slide" src="" alt="">
              <img class="main-slider__slide swiper-slide" src="" alt="">
          </div>
        </div>
        <div class="presentation-slider__thumbs thumbs-slider">
          <div class="thumbs-slider__wrapper swiper-wrapper">
              <img class="thumbs-slider__thumb swiper-slide" src="" alt="">
              <img class="thumbs-slider__thumb swiper-slide" src="" alt="">
              <img class="thumbs-slider__thumb swiper-slide" src="" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Классы main-slider, main-slider__wrapper и main-slider__slide, а так же аналогичные у thumbs-slider, так как Вы используете swiper, нужны только в том случае, если Вы хотите задать им какие-то свои кастомные стили.

[mukzer]

Вадим, Спасибо за ответ)
section-outer Это у меня был класс который задает отступы вниз от section. ( они у меня есть на каждой секции )

[Вадим]

mukzer, Поэтому я и вынес это в модификатор.

[mukzer]

Вадим, Здравствуйте, можно ещё у вас спросить, как правильнее писать модификаторы по БЭМ.
В документации написано что модификаторы пишутся как-то так "popup_sun", но почему-то много людей я встречал что пишут "popup--sun". Вот здесь запутался, как правильно?)

[Вадим]

mukzer, бэм не строго декларирует какой синтаксис вам использовать. Можете использовать классический вариант б_э__м, можете альтернативный, а можете придумать свой. Главное чтобы было везде одинаково, а разделение очевидно.

https://ru.bem.info/methodology/naming-convention/

[mukzer]

Вадим, Спасибо!