N
N
Norum2021-10-11 22:41:32
HTML
Norum, 2021-10-11 22:41:32

Is it possible to use a repeating block wrapper for BEM layout?

Is it possible to use the wrapper block in BEM layout like this? What confuses me is that usually an element that is in a block first has its name, and then the name of the element itself is written through __ and if we take, for example, the .main section, then the .main__content block should be called .main__wrapper-content or am I mistaken and I have it spelled right? I just want each section to have a wrapper with a certain width and padding, and when the width is not needed and I need to make the content fill the entire width of the screen, then create a .wrapper-fluid

<section class="main">
  <div class="wrapper">
    <div class="main__content">
      <h1 class="main__title">Заголовок</h1>
      <p class="main__text">Текст</p>
    </div>
  </div>
</section>

<section class="features">
  <div class="wrapper">
    <div class="features__content">
      <h1 class="features__title">Заголовок</h1>
      <p class="features__text">Текст</p>
    </div>
  </div>
</section>

<section class="footer">
  <div class="wrapper">
    <div class="footer__content">
      <h1 class="footer__title">Заголовок</h1>
      <p class="footer__text">Текст</p>
    </div>
  </div>
</section>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vadim, 2021-10-11
@Norum

Can.
wrapper is an independent block whose sole responsibility is to set width limits.
And nowhere is there a prohibition that blocks cannot be nested into each other without establishing a block-element relationship between them.
If you wrote main_wrapper, footer__wrapper, then this would mean that these wrappers have different styles.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question