How to mark up the internal pages of the site from the BEM point of view?

Question

HTML

How to mark up the internal pages of the site from the BEM point of view?

Do I need to indicate everywhere what this page is? For example inner-page__services or price-page__quality-assurance

Let's say I have an internal page of the site, the section of which, in principle, can be described as services . There is a list of services and prices for them, as well as a list of branded products, which guarantees the quality of the services provided.
But as usual, services flickers somewhere on the main landing page. And then I hit a dead end. After all , servicesthis block, which can be repeated on other pages of the site, and at the same time, will look different. In my case, there is no such section on the main page. But, nothing prevents him from appearing there, over time.

Of course, if you follow BEM completely, the same file structure should appear. But if I need to cram all the styles into one css? Then, is it worth somehow highlighting the content of internal pages? Or should repetition in class naming be avoided?

Answer 1

Structure for all pages:

.page
    .page__header
      .header
    .page__wrapper
      .page__block1
        .block1  // это блок страницы, замените на свое название
      .page__block2 
        .block2 
  .page__footer
      .footer

Do I need to indicate everywhere what this page is?

The basic template that is on all pages (header, footer) is usually taken out in a separate file when integrating the layout. Therefore, it is not necessary to hang up your own class on each page unnecessarily.

After all, services is a block that can be repeated on other pages of the site, and at the same time, it will look different.

Name it differently .main-service or .last-service

Of course, if you follow BEM completely, the same file structure should appear. But if I need to cram all the styles into one css?

In the beme, each block has its own style file. You can collect the final css as you like, for example, use sass include.

Or should repetition in class naming be avoided?

Avoid repetition in block names.

Answer 2

After all, services is a block that can be repeated on other pages of the site, and at the same time, it will look different

To do this, you can use the mix . For example, you have a block servicesand you want to use it on the main page and on any other page, then the naming of this block on the main page will be like this - where you describe the location of the elements inside the block for the main page class="main__services services"using the selector . Now you can do the same for another pagemain__servicesservicesclass="another-page__services services"