Как правильно написать вложенность в HTML?
<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.
Как лучше поступить? Если есть статьи на эту тему можете поделиться.
Ответы (1 шт):
Для вас не имеет смысла писать 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>