2

** Bem official website says **

Create a block If a section of code might be reused and it doesn't depend on other page components being implemented.

Create an element If a section of code can't be used separately without the parent entity (the block).

I have a "about section" block. its elements depend on parent and not reusable in website . how to structure according to bem this code ? this code breaking bem rule because its BEM not BEEM.

<section class="about">
    <div class="about__container">
      <div class="about__header">
        <h2 class="about__title">about title</h2>
        <p class="about__sub-title">about sub title </p>
      </div>
      <div class="about__stats">
        <div class="about__stats__item">
          <div class="about__stats__title">stats title</div>
          <div class="about__stats__sub-title">stats sub title</div>
        </div>
      </div>
      <div class="about__features">
        <div class="about__features__item">
          <div class="about__features__icon">features icon </div>
          <div class="about__features__title">features title </div>
        </div>
      </div>
    </div>
  </section>
coding journey
  • 41
  • 3
  • why can't you just change the second set of underscores for a dash? eg `about__stats-item`. But I've also seen multiple implentations of BEM where you do have lots of double underscores so I guess it's just up to what you prefer – Pete Jan 24 '23 at 12:22

1 Answers1

0

Two solutions:

<section class="about">
<div class="about__container">
  ...
  <div class="about__stats">
    <div class="about__item">
      <div class="about__title">stats title</div>
      <div class="about__sub-title">stats sub title</div>
    </div>
  </div>
  <div class="about__features">
    <div class="about__item">
      <div class="about__icon">features icon </div>
      <div class="about__title">features title </div>
    </div>
  </div>
</div>

or:

<section class="about">
<div class="about__container">
  ...
  <div class="stats">
    <div class="stats__item">
      <div class="stats__title">stats title</div>
      <div class="stats__sub-title">stats sub title</div>
    </div>
  </div>
  <div class="features">
    <div class="features__item">
      <div class="features__icon">features icon </div>
      <div class="features__title">features title </div>
    </div>
  </div>
</div>

Solution 1 if CSS title: inside stats/features block are identic.

Solution 2 if you could decide to move the entire features/stats block.

But indeed having grandchild (what's your call BEEM) is never a good approach.

Echyzen
  • 194
  • 6
  • plz see this too. https://stackoverflow.com/questions/75219095/how-to-deal-with-mini-blocks-of-sections-in-bem-naming-convention – coding journey Jan 24 '23 at 15:12