@Barring

Как правильно верстать многостраничный сайт придерживаясь БЭМ?

Есть проект, в котором больше десятка страниц. Есть страницы схожие по текстовому наполнению, но не по дизайну.

Возьмём, к примеру, страницы "page-x" и "page-y". На них обеих есть секция, в которой описываются услуги компании в сфере page-x и page-y соответственно. По логике, хочется её назвать и в одном, и другом случае.

Вопрос в том, допускается ли следующий вариант развития событий, что бы на обеих страницах были одинаковые названия классов (services-section), но при этом, для их стилизации использовалась вложенность типа :

.page-x .services section {}
.page-y .services-section {}

Или правильнее делать длинное название .page-x-services-section / .page-y-services-section?
Просто в такой ситуации, если у этих блоков будут какие - то элементы, то названия классов будут уж слишком линные в духе .page-x-services-section__list.

Как правильнее поступать?
  • Вопрос задан
  • 505 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Если стараться максимально придерживаться БЭМ, то такой конструкции .page-y .services-section лучше избежать. Вот такого точно не должно быть .page-x .services section
Вот так тоже не правильно .page-x-services-section / .page-y-services-section вы косвенно уже привязались к какой-то из страниц.

Вы можете использовать микс:
page-x__services-section services-section
Либо модификатор:
services-section services-section_type_1

Такая конструкция .page-y .services-section имеет место быть, но лучше избегать или хотя бы не увлекаться
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
PaulTMatik
@PaulTMatik
Согласно БЭМ, твои компоненты должны быть автономными. То есть, если ты видешь, на обеих страницах блок, который нужно классифицировать как .services, то так и называешь. Для того, чтобы в такой блок внести какие-то специальные изменения, то нужно добавлять модификатор к списку классов. Например: .services--scheme-one. В итоге в атребуте класс, компонента будут такие названия: class="services services--scheme-one". В стилях, естественно, селектор только по одному классу должен быть.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы