Understanding of CSS BEM

Hey Gang, Feel lucky to see you again. Every year design trends getting changed and then we plan to adapt our websites for trendy and present day feel. Sadly, website may sometimes styled without any structure or naming conventions. This leads to an unmaintainable CSS codebase and crack out our plans😥😥 be like.

Uh, feel awkward right. But, don't getting trouble with that because every problem definitely have a solution. Likewise, we convert unmaintainable CSS codebase to maintainable using BEM naming convention.

BEM - Block Element Modifier

BEM is constructed on basis of class name selector only which not use id or tag name selector.

Above image seems little bit weired😥. It's not a big deal and hope keep continue reading and you grasp that tricks🎉.

Block

Block is a standalone entity that is meaningful on its own and is a top-level abstraction of a new component.

For instance,

• header
• container
• menu
• checkbox
• input

Naming

Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing: .block

// Blocks are named as standard CSS classes
.block {
}
//example 
.card {
}

Element

Element is a parts of a block (Child items of block) and have no standalone meaning. Any element is semantically tied to its block.

For instance,

• menu item
• list item
• checkbox caption
• header title

Naming

Element names may consist of Latin letters, digits, dashes and underscores.
CSS class is formed as block name followed by two underscores and then element name: .block__elem

// Elements declared with 2 underscores, after block
.block__element {
}
//example
.card__title{
}

Modifier

Flags on blocks or elements. Use them to change appearance, behavior or state.

In simple words, the use of a ‘modifier’ to apply the additional unique styles.

For instance,

• disabled
• highlighted
• checked
• fixed

Naming

Modifier names may consist of Latin letters, digits, dashes and underscores.
CSS class is formed as block’s or element’s name followed by two dashes (--):

• If block's modifier, then .block--mod.
• If Element's modifier, then .block__elem--mod.

// Modifiers declared with 2 dashes, after block
.block--modifier {
}

//example
.card--dark{
}

// Modifiers declared with 2 dashes, after element
.block__element--modifier {
}

//example
.card__btn--large{
}

Hey still with me🥳, I feel you getting curious about BEM. So, It's my pleasure to show the live demo. Just hover the containers, you may getting an confidence about block-element relationship (parent-child relationship).

I can get your question🤔

there are so many naming conventions like OOCSS, SMACSS, SUITCSS, Atomic. But, why we choose BEM?? right.

The answer is..

If we are reading the markup instead of CSS, we should be able to quickly get an idea of which element depends on another (in the previous example we can see that .card__title depends on .card, even if we don’t know what that does just yet.)

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

Use BEM as it way

ofcourse you can break down the rule of BEM like below,

//completely unrelated
.nav .nav__listItem .btn--orange {
  background-color: green;
}

yes you are right which seems BEM naming convention. But, it's not😑. which only make confusion and incosistent code. Hope you grasp my point.

Final instance for BEM

Hope you getting curious for using BEM in your projects. So, getting clear thought about BEM. I will show a little massive example below,

Image credits goes to 99elements

let's test BEM skills. From above image, can you identify which one is block / element / modifier. Don't hesitate, post your answer below as comment.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Thanks for Reading!!
Preethi
- Make your CSS life easier