Kevin Powell - CommunityKP-C
Kevin Powell - Communityā€¢5mo agoā€¢
40 replies
Koner

BEM Advice

I'm trying to use BEM in CSS, but I'm not sure how I should name these classes: I have a task element used throughout a block (game) and an input element that appears inside both sub-sections of the game (solution and question screens). How should I name the elements properly?

My current structure:
<div class="game">
    <div class="game__solution">
        <div class="game__task"></div>       
        <div class="game__solution__input"></div> 
    </div>
    <div class="game__question">
        <div class="game__task"></div>       
        <div class="game__question__input"></div> 
    </div>
</div>


I can't just name both of them game__input because they should have different CSS rules.

Also, do I have to say game__solution or is it okay to create a nested block (just solution)?

How should I write this so that it follows BEM?

NOTICE: I just used divs here for a simplified example
Was this page helpful?