Как правильно написать вложенность в HTML?

Рейтинг: 0Ответов: 1Опубликовано: 17.04.2023
<div class="out-work">
            <h4 class="out-work-title">Наши работы</h4>
            <div class="out-work-slider slider">
              <div class="slider-wrapper">
                <div class="slider-slide">
                  <div class="out-work-card">
                    <div class="out-work-card-header">
                      <img class="out-work-card-img" src="./images/alibaba.png" alt="alibaba" />
                      <p class="out-work-card-desc">
                        Самая крупная в Финляндии компания по обработке камня и крупнейший в мире производитель
                        теплоаккумулирующих печей каминов текст пример
                      </p>
                    </div>
                    <div class="out-work-card-body">
                      <div class="out-work-card-body-caption">Результат:</div>
                      <div class="out-work-card-body-row">
                        <div class="out-work-card-body-row-item">
                          <span>+ 85,71%</span>
                          увеличение количества обращений с рекламы
                        </div>
                        <div class="out-work-card-body-row-item">
                          <span>+ 83,51%</span>
                          увеличение конверсии
                        </div>
                        <div class="out-work-card-body-row-item">
                          <span>- 50,51%</span>
                          снижение стоимости за обращение
                        </div>
                      </div>
                    </div>
                    <div class="out-work-card-footer">
                      <div class="out-work-card-footer-caption">Системы:</div>
                      <div class="out-work-card-footer-images">
                        <img class="out-work-card-footer-image" src="" alt="" />
                        <img class="out-work-card-footer-image" src="" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <button class="slider-btn-prev"></button>
              <button class="slider-btn-next"></button>
            </div>
          </div>

У меня есть небольшой кусок кода из проекта. Задался вопросом, а нужно ли всем элементам внутри блока написать классы?

Тогда получиться вот такой css таблица стилей -->

.out-work {
}
.out-work-title {
}
.out-work-slider {
}
.slider {
}
.slider-wrapper {
}
.slider-slide {
}
.out-work-card {
}
.out-work-card-header {
}
.out-work-card-img {
}
.out-work-card-desc {
}
.out-work-card-body {
}
.out-work-card-body-caption {
}
.out-work-card-body-row {
}
.out-work-card-body-row-item {
}
.out-work-card-footer {
}
.out-work-card-footer-caption {
}
.out-work-card-footer-images {
}
.out-work-card-footer-image {
}
.slider-btn-prev {
}
.slider-btn-next {
}

Мне хотелось сделать все элементы блока вложенным и не давать им классы, так сказать не мусорить HTML и CSS.

Как лучше поступить? Если есть статьи на эту тему можете поделиться.

css html бэм
Источник: Stack Overflow на русском

Ответы

▲ 0

Для вас не имеет смысла писать HTML в БЭМ, если не используешь SCSS, SASS.
А если использовать SCSS, тогда как вы видите упрощается написание стилей, мы всего лишь раз прописываем родительский класс и потом пишем через "&" дополнения, которые в HTML начинаются с "__".
Также я как видите убрал ".out-work" в разделе ".card-body". Нужно понимать когда нужно продолжать класс от родителя, а когда создавать самостоятельный класс. В данном случае я создал самостоятельный класс ".card-body" и от него уже начал выстраивать дополнительные классы.
Почему же я так сделал? Дело в том, что ваш ".card-body" может встречаться не только в ".out-work", но может быть ещё какой-то ".in-work", внутри которого будет тот самый ".card-body" с теми же стилями, но если мы сделаем ".card-body" зависимым от ".out-work", то придётся эти же стили ещё копипастить в ".in-work", что нам не нужно.
Если же вдруг в ".out-work .card-body" появится уникальный стиль, то мы просто пишем ".card-body" внутри ".out-work" и переопределяем стили конкретно для этого блока. В стилях я показал как написал общий ".card-body" и как написал уникальный для ".out-work".

.out-work {
  &__title {
  
  }
  &__slider {
  
  }
  &__card {
  
  }
  &__card-header {
  
  }
  .card-body {
    &__row-item {

    }
    &__caption {

    }
  }
}
.card-body {
  &__rows {

  }
  &__row-item {

  }
  &__caption {

  }
}
<div class="out-work">
  <h4 class="out-work__title">Наши работы</h4>
  <div class="out-work__slider slider">
    <div class="slider-wrapper">
      <div class="slider-slide">
        <div class="out-work__card">
          <div class="out-work__card-header">
            <img class="out-work__card-img" src="./images/alibaba.png" alt="alibaba" />
            <p class="out-work__card-desc">
              Самая крупная в Финляндии компания по обработке камня и крупнейший в мире производитель
              теплоаккумулирующих печей каминов текст пример
            </p>
          </div>
          <div class="card-body">
            <div class="card-body__caption">Результат:</div>
            <div class="card-body__rows">
              <div class="card-body__row-item">
                <span>+ 85,71%</span>
                увеличение количества обращений с рекламы
              </div>
              <div class="card-body__row-item">
                <span>+ 83,51%</span>
                увеличение конверсии
              </div>
              <div class="card-body__row-item">
                <span>- 50,51%</span>
                снижение стоимости за обращение
              </div>
            </div>
          </div>
          <div class="out-work__card-footer">
            <div class="out-work__card-footer__caption">Системы:</div>
            <div class="out-work__card-footer__images">
              <img class="out-work__card-footer__image" src="" alt="" />
              <img class="out-work__card-footer__image" src="" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="slider-btn-prev"></button>
    <button class="slider-btn-next"></button>
  </div>
</div>