CODEWITHSUNDEEP
htmlcssbem
konichiwa
konichiwa

Reputation: 551

Naming convention nested blocks and elements in BEM in CSS

I am a newbie in the BEM world and was looking for some clarity. The BEM guide advises me to use the following approach:

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

Let's say I have the following piece of code. It's not clear to me if I should use trending-topics__image and trending-topics__title, or trending-topics--item__image and trending-topics--item__title, or something different for my elements. I feel like trending-topics__image and trending-topics__title would be too generic, since the trending-topics container could also contain a header image or title that needs different styling.

<div class="trending-topics">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <a class="trending-topics__item" href="#">
                    <img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/>
                    <span class="[WHAT NAME SHOULD I USE?]">Lorem ipsum</span>
                </a>
            </div>
            <div class="col-2">
                <a class="trending-topics__item" href="#">
                    <img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/>
                    <span class="[WHAT NAME SHOULD I USE?]">Lorem ipsum</span>
                </a>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1658

Answers (1)

Ibrahim Osama
Ibrahim Osama

Reputation: 38

BEM is very ease to learn and implement. Also there is some point keep in your mind. 1. You should use short name for parent class if you want use modifier later something like this.

<div class="t-topic"><div>

2. choose simple Element name to you can remember it later. like (unit, thumb, list, item).

This your code.

<div class="t-topics">
<div class="container">
    <div class="row">
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
    </div>
</div>

There Also other way if you want nested block like this

<div class="t-topics">
<div class="container">
    <div class="row">
        <div class="col-2">
            <a class="link t-topics__link" href="#">
              <img class="link__image" src=""/>
              <img class="link__image link__image--other" src=""/> // Different image                   
              <span class="link__span">Lorem ipsum</span>
            </a>
        </div>
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
    </div>
</div>

You can learn more about BEM from this links.

https://www.toptal.com/css/introduction-to-bem-methodology. https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

Upvotes: 1

Related Questions