Header naming and BEM styling?

Question

css

Good day, I have a question.

Let's say there is a simple html structure from an article, inside of which there are several sections with their own headings. Usually I write it like this:

<article class="article">
  <h1 class="article__title">Заголовок h1</h1>
  <section class="section">
    <h2 class="section__title">Заголовок секции h2</h2>
  </section>
</article>

Because heading styles on all pages and sections are almost always the same, then I create and call a mixin for them

@mixin h1 {
  ...
}
.article__h1 {
  @include h1;
}

It seems to me convenient and logical, and questions have not arisen before. On the last project (freelance), such an approach began to be dealt with. They suggest making separate classes h1, h2, h3, .. and mix them in html with elements. Those. it will turn out like this:

<article class="article">
  <h1 class="h1 article__title">Заголовок h1</h1>
  <section class="section">
    <h2 class="h2 section__title">Заголовок секции h2</h2>
  </section>
</article>

The motivation is improved readability and easier reusability. I don’t understand how exactly this simplifies reuse, but I couldn’t get a clear answer: “Remake it like this and don’t like brains.”

Actually, my question is - how do you approach the issue of naming and styling headings? Sass/Less mixins? Separate classes? Do you re-write the styles for each heading of each section by hand? I have seen another option when, for example, the page class is hung on the body , and on the page itself, the page_title / page__subtitle class is set to the headings (well, it is mixed with section/article__title ).

Answer 1

Well, it really makes sense to make headings and other frequently used elements separate classes. Using mixins is bad because they duplicate the code in the final css file. As for improving reuse - it seems like it's obvious. If you need a title, you can insert it into any block. Even the article__title name is optional for them if you need to customize or set indents - this is done in a cascade