BEM concept in CSS

Question

I've recently played around BEM syntax, I am confused about BEM elements.

I have header which contain logo and login box. So I made structure like this:

<header class="header clearfix">
    <div class="col-sm-6 col-xs-12">
        <a href="/" class="header__logo"></a>
    </div>
    <div class="col-sm-6 header__login">
        <div class="pull-right">
            <div class="login__email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="login__password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="login__submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

So as you can see I use .header__logo and .header__login and inside of .header__login I used separate block .login__email.

So my question is am I going right with BEM concept or my class should be read like:

.header__login--email
.header__login--passowrd
.header__login--submit

Tushar Gupta · Answer 1 · 2015-08-23T16:59:54.850

For those new to this convention , The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.Its main goal is to help developers better understand the relationship between the HTML and CSS in a given project.

You are on right track....

For dependencies we use __

/* Element that depends upon the block */ 
.btn__price {}

for Modifiers we use --

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

sergdenisov · Accepted Answer · 2015-08-23T18:23:40.923

I think your case isn't right BEM using, because you can't use Element without Block:

<div class="col-sm-6 header__login">
    <div class="pull-right">
        <div class="login__email pull-left">
            <input type="text" id="email" placeholder="EMAIL ADDRESS">
        </div>
        ...
    </div>
</div>

You must have .login block. I'd do something like this:

<div class="col-sm-6 header__login">
    <div class="login pull-right">
        <div class="login__email pull-left">
            <input type="text" id="email" placeholder="EMAIL ADDRESS">
        </div>
        ...
    </div>
</div>

Your assumption about modifiers (.header__login--email, etc) isn't right too, because you can't use Modifier without Block/Element and can't use Element inside another the same Element:

<header class="header clearfix">
    <div class="col-sm-6 col-xs-12">
        <a href="/" class="header__logo"></a>
    </div>
    <div class="col-sm-6 header__login">
        <div class="pull-right">
            <div class="header__login header__login_email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="header__login header__login_password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="header__login header__login_submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

So, my advice is just to add .login block and it'll be OK for BEM:

<header class="header clearfix">
    <div class="col-sm-6 col-xs-12">
        <a href="/" class="header__logo"></a>
    </div>
    <div class="col-sm-6 header__login">
        <div class="login pull-right">
            <div class="login__email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="login__password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="login__submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

Also you could use separate blocks, it's OK too:

<header class="header clearfix">
    <div class="col-sm-6 col-xs-12">
        <a href="/" class="header__logo"></a>
    </div>
    <div class="col-sm-6 header__login">
        <div class="pull-right">
            <div class="login-email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="login-password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="login-submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

P.S. I prefer original BEM name convention:

.block__element--modifier
vs
.block__element_modifier (or .block__element_modifier_value).

BEM concept in CSS

2 Answers2