Задать вопрос
@chegcheg
html

БЭМ-нейминг с глубокой вложенностью?

Имеется такая структура:

<div class="section features">
	<div class="title">
		<h2>Заголовок</h2>
		<div class="title__subtitle">Подзаголовок</div>
	</div>
	<div class="inner">
		<div class="features__block1">
			<div class="features__block1__item">
				<div class="features__block1__item__icon">
					<img src="images/icon1.png" alt="" />
				</div>
				<div class="features__block1__item__text">
					Текст текст текст текст текст
				</div>
			</div>
		</div>
		<div class="features__block2">
			<div class="features__block2__item">
				<div class="features__block2__item__icon">
					<img src="images/icon1.png" alt="" />
				</div>
				<div class="features__block2__item__text">
					Текст текст текст текст текст
				</div>
			</div>
		</div>
	</div>
</div>


Правильно ли именовал классы, учитывая следующее:
  • .section - раздел страницы
  • .features - "имя" раздела
  • .inner - контейнер для выравнивания контента по горизонтали
  • .features__block1 и .features__block2 - контейнеры для элементов
  • .features__block1__item и .features__block2__item - элементы
  • &__item__icon - субэлемент (не знаю как правильно обозвать)


Собственно, вопрос сводится к тому, правильно ли данное наименое - .features__block1__item, если в одном разделе страницы "хочется" расположить элементы с "припиской" &__item, но при этом они будут несколько отличатся друг от друга по смыслу/контенту?
Если нет, подскажите какой вариант будет верный.

Всем заранее спасибо!
  • Вопрос задан
  • 610 просмотров
Комментировать
Подписаться Оценить Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега HTML
frontend developer
У БЭМ не существует глубокой вложенности!
Блок -> Элемент
Всё.

Из этого и исходите.

Например
<div class="section">
  <div class="title">
    <h2>Заголовок</h2>
    <div class="title__subtitle">Подзаголовок</div>
  </div>
  <div class="inner features">
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
  </div>
</div>
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать лендинг, переработать существующий логистический сайт
16 апр. 2024, в 16:34
30000 руб./за проект
Управление процессами и задачами в продукте "Форсайт"
16 апр. 2024, в 16:33
1000 руб./за проект
Написать учебное JS приложение - несколько интеграций с API
16 апр. 2024, в 16:31
5000 руб./за проект
Ещё заказы