CODEWITHSUNDEEP
htmlnaming-conventionsbem
Daksh B
Daksh B

Reputation: 262

BEM html naming convention

I have been trying to get on with BEM for a past few days but am confused as to how to go about the naming convention.

I understand that you name a block and then add elements as needed with a double underscore. But sometimes it hardly makes sense.

Let's take this as an example.

<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>

Source: https://en.bem.info/methodology/quick-start/

Let's assume, I already have a few buttons coded according to BEM naming convention. Something like

<button class="btn btn--secondary">Search</button>

Question: If I replace the search-form__button in the form with the second code btn btn--secondary wouldn't that mean I broke the rules?

Second, can someone please help me with naming this block below using the BEM convention

<div class="profile-card">
    <div class="profile-card-header"></div>
    <div class="profile-pic"><img src="images/headshot.JPG"> </div>
    <div class="content">
        <div class="main"> <a class="header">Donald Trump</a>
            <div class="meta">President, USA</div>
            <div class="location">Somehwere in USA</div>
        </div>
        <p>I am the President of US of A and its huge</p>
    </div>
    <div class="footer">
        <div class="btn-group" role="group" aria-label="...">
         <button class="btn">hi</button>
    </div>
    </div>
</div>

I am not putting up the codes for the second block I am asking help for but trust me I have tried and every time it ended up being a spaghetti, more confusing and so ridiculously draining that I ended up deleting everything. Will be grateful if you can help

Upvotes: 1

Views: 383

Answers (1)

tzi
tzi

Reputation: 9459

You are not breaking the rules if you nest BEM blocks, it's what it means to be, but you have to do it carefully.

The best solution is to create an element that will welcome a child block, I like to call it a "nest". This nest should handle position, margins and alignment. So you don't have to modify your child block (btn) to handle a new context.

<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block, called nest -->
    <div class="search-form__button>

        <!-- new button block -->
        <button class="btn btn--secondary">Search</button>
    </div>
</form>

For you second question, here is my guess:

<div class="profile-card">
    <div class="profile-card__header"></div>
    <div class="profile-card__pic">
      <img src="images/headshot.JPG">
    </div>
    <div class="profile-card__content">
        <div class="profile-card__main">
            <a class="profile-card__name">Donald Trump</a>
            <div class="profile-card__role">President, USA</div>
            <div class="profile-card__location">Somehwere in USA</div>
        </div>
        <p>I am the President of US of A and its huge</p>
    </div>
    <div class="profile-card__footer">
        <div class="btn-group" role="group" aria-label="...">
            <button class="btn">hi</button>
        </div>
    </div>
</div>

You see that profile-card__footer become a nest for a child block (.btn-group).

Upvotes: 4

Related Questions