40 replies

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>

<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

game__input

because they should have different CSS rules.

Also, do I have to say

game__solution

game__solution

or is it okay to create a nested block (just

solution

solution

)?

How should I write this so that it follows BEM?

NOTICE: I just used divs here for a simplified example

KP-C

Kevin Powell - Community•7mo ago•

40 replies

Koner

BEM Advice

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

<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

game__input

because they should have different CSS rules.

Also, do I have to say

game__solution

game__solution

or is it okay to create a nested block (just

solution

solution

)?

How should I write this so that it follows BEM?

NOTICE: I just used divs here for a simplified example

BEM Advice

Similar Threads

BEM Advice

Similar Threads

Similar Threads

Similar Threads