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?
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..
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.
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.