Как правильно верстать многостраничный сайт придерживаясь БЭМ?
Есть проект, в котором больше десятка страниц. Есть страницы схожие по текстовому наполнению, но не по дизайну.
Возьмём, к примеру, страницы "page-x" и "page-y". На них обеих есть секция, в которой описываются услуги компании в сфере page-x и page-y соответственно. По логике, хочется её назвать и в одном, и другом случае.
Вопрос в том, допускается ли следующий вариант развития событий, что бы на обеих страницах были одинаковые названия классов (services-section), но при этом, для их стилизации использовалась вложенность типа :
Или правильнее делать длинное название .page-x-services-section / .page-y-services-section?
Просто в такой ситуации, если у этих блоков будут какие - то элементы, то названия классов будут уж слишком линные в духе .page-x-services-section__list.
Если стараться максимально придерживаться БЭМ, то такой конструкции .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 имеет место быть, но лучше избегать или хотя бы не увлекаться
Согласно БЭМ, твои компоненты должны быть автономными. То есть, если ты видешь, на обеих страницах блок, который нужно классифицировать как .services, то так и называешь. Для того, чтобы в такой блок внести какие-то специальные изменения, то нужно добавлять модификатор к списку классов. Например: .services--scheme-one. В итоге в атребуте класс, компонента будут такие названия: class="services services--scheme-one". В стилях, естественно, селектор только по одному классу должен быть.
