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

Question

[Genri_Rus]

Как в данном случае будет правильнее ?

<div class="info">
       <div class="wrapper-info">
             <div class="container">
                 <div class="info-slider">
                    <div class="info-slider-item">
                         <div class="info-slider__photo"><img class="info-slider__photo-preview" src="путь к картинке" alt="описание"></div>
                         <div class="info-slider__name">Имя</div>
                    </div>
              </div>
        </div>
    </div>
</div>

Comments

[Rustam Bainazarov]

Я бы так, например:
.info-slider
.info-slider__item
.info-slider__item-photo
.info-slider__item-photo-preview или .info-slider__item-preview
.info-slider__item-name

Можно короче:
.info-slider
.info-slider__item
.info-slider__photo
.info-slider__preview
.info-slider__name

[Genri_Rus]

Рустам Байназаров, info-slider__photo-preview правильно ?

[Rustam Bainazarov]

Genri_Rus, дополнил.

[Genri_Rus]

Рустам Байназаров,

Можно короче:

Так тоже можно: .info-slider__item-photo-preview ?

[Rustam Bainazarov]

Genri_Rus, да как угодно можно, главное — сделайте .info-slider-item элементом, а не блоком, как сейчас.

И чтобы не было совпадений классов.

[Genri_Rus]

Рустам Байназаров, спасибо за ответ !

[Rustam Bainazarov]

Genri_Rus, не за что, пишу ответ.

[Genri_Rus]

Рустам Байназаров, а как вы бы лучше назвали данный блок ?

<div class="info-slider__photo"><img class="info-slider__photo-preview" src="путь к картинке" alt="описание"></div>

Или так пойдет ?
Просто: photo и preview как-то не очень

[Rustam Bainazarov]

Genri_Rus, можно

<div class="info-slider__image-wrapper"><img class="info-slider__image" src="путь к картинке" alt="описание"></div>

[Genri_Rus]

Рустам Байназаров, info-slider__image-wrapper в данном случае подойдет только для одной картинки ?

[Rustam Bainazarov]

Genri_Rus, в плане? Wrapper с англ. — это обёртка.

[Genri_Rus]

Рустам Байназаров, я имел ввиду, что у меня там больше не планируется никаких картинок, кроме одной

[Rustam Bainazarov]

Genri_Rus, и что? Обёртка не может оборачивать один элемент? Это из самых тичияных наименований классов в CSS. Этот же блок служит обёрткой для IMG.

[Genri_Rus]

Рустам Байназаров, хорошо, понял )

[Genri_Rus]

Рустам Байназаров, а так тоже правильно будет ?

<div class="info">
       <div class="wrapper-info">
             <div class="container">
                 <div class="info-slider">
                    <div class="info-slider__item">
                          <div class="info-slider__image-wrapper"><img class="info-slider__image" src="путь к картинке" alt="описание"></div>
                          <div class="info-slider__text">
                              <div class="info-slider__name">Имя</div>
                          </div>
                    </div>
              </div>
        </div>
    </div>
</div>

[Rustam Bainazarov]

Genri_Rus, да, вполне.

Answer 1

[Rustam Bainazarov]

Я бы так, например:

.info-slider
.info-slider__item
.info-slider__item-photo
.info-slider__item-photo-preview или .info-slider__item-preview
.info-slider__item-name

Можно короче:

.info-slider
.info-slider__item
.info-slider__photo
.info-slider__preview
.info-slider__name

Comments

[Сергей delphinpro]

Я бы item вынес в отдельный блок. Всё-таки слайд — самостоятельная сущность, слайды могут быть разными, в общем их содержимое к самому слайдеру мало отношения имеет.

[Rustam Bainazarov]

Сергей delphinpro, да, можно так, тут уже пусть сам автор решает. Я обычно делаю стандартную обёртку слайда, у которой нет стилей, она просто задает габариты, а уже внутри уникальные элементы.

[Genri_Rus]

Сергей delphinpro, покажите ваш пример, я также посмотрю и отмечу ваше решение

[Сергей delphinpro]

Genri_Rus, примерно так

.info-slider
.info-slider__item.slide
.slide__photo
.slide__preview
.slide__name

PS. имя slide плохое. Лучше чтобы оно описывало содержимое слайда.

[Rustam Bainazarov]

Genri_Rus, он и я про то, что:

<div class="info-slider">
  <div class="info-slider__slide">

    <!-- Начинаем новый блок -->
    <div class="item">
      <div class="item__image-wrapper">
        <img class="item__image" src="путь к картинке" alt="описание">
      </div>
      <div class="item__text">
        <div class="item__name">Имя</div>
      </div>
    </div>

  </div>
</div>

Как таковое к самому вопросу это не относится просто.

[Genri_Rus]

Сергей delphinpro, дело в том, что все слайдеры разные как по структуре, так и по дизайну