Naming convetion for nested elements

Hi! I'm new to BEM, trying to implement with a little project to learn it.

Inside my HTML file i have this code

<main class="game">

    <!-- Choose to play the game or see the highscores -->
    <div class="game__choose">
      <button class="btn" onclick="startGame()">Play Game</button>
      <button class="btn" onclick="showHighscores()">Show Highscores</button>
    </div>
    <!-- Choose to play the game or see the highscores -->

    <!-- Display elements of the game -->
    <div class="game__game-area">

      <div class="game__hud">
          <div id="questions-counter ">
              <h4>Question</h4>
              <h1>0</h1>
            </div>
            <div id="score">
              <h4 >Score</h4>
              <h1>0</h1>
            </div>
      </div>

    </div>
    <!-- Display elements of the game -->

According to the FAQs code should look like this

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

So, my questions are:

Is the class game__choose ok?
In the class game__hud i have two more divs. Should the name be game__hud-question-counter or hud__question-counter for example?

5 years ago

beinoriusju

Hello, I'm also new to BEM.

Try to understand why and when to use mixes: https://en.bem.info/methodology/key-concepts/#mix

Without understanding mixes you can't further improve.

To comment on your "game" block..

game__choose is OK
game__game-area can and should be improved!

There are many ways, but my suggestion is to create new game-area block with it's own elements and use game__game-area for relative positioning/contextual stuff only.

<div class="game__game-area game-area">

    <div class="game-area__hud">
      <div id="game-area__counter">
          <h4>Question</h4>
          <h1>0</h1>
        </div>
        <div id="game-area__score">
          <h4 >Score</h4>
          <h1>0</h1>
        </div>
    </div>

</div>

As far as my knowledge goes you can break rules and create your own as long as you understand why the rules were created in the first place.

p.s. I would also avoid using multiple H1 tags on the same page (see here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). If you need to size text differently consider using SPANS or DIVS.

In order to leave a comment you need to login.