How to properly layout a multi-page site adhering to BEM?

Question

css

There is a project with more than a dozen pages. There are pages similar in text content, but not in design.

Take, for example, the pages "page-x" and "page-y". Both of them have a section that describes the company's services in the area of ​​page-x and page-y, respectively. Logically, I want to call it in one or the other case.

The question is whether the following scenario is allowed, so that both pages have the same class names (services-section), but at the same time, nesting is used to style them:

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

Or is it more correct to make a long title .page-x-services-section / .page-y-services-section?
Just in such a situation, if these blocks have some elements, then the class names will be too long in the spirit of .page-x-services-section__list.

How to do it right?

Answer 1

If you try to stick to BEM as much as possible, then such a .page-y .services-section construction is best avoided. This definitely shouldn't happen .page-x .services section
This is also not correct .page-x-services-section / .page-y-services-section you have already indirectly linked to one of the pages.
You can use a mix:
page-x__services-section services-section
Or a modifier:
services-section services-section_type_1
Such a .page-y .services-section construction has a place to be, but it is better to avoid or at least not get carried away

Answer 2

According to BEM, your components should be self-contained. That is, if you see a block on both pages that needs to be classified as .services, then you call it that. In order to make some special changes to such a block, you need to add a modifier to the list of classes. For example: .services--scheme-one. As a result, the class attribute of the component will have the following names: class="services services--scheme-one". In styles, of course, there should be a selector for only one class.