DEV Community

Cover image for Understanding of CSS BEM
Preethi⚡
Preethi⚡

Posted on • Updated on

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.
Image description

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.

Image description

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 {
}
Enter fullscreen mode Exit fullscreen mode

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{
}
Enter fullscreen mode Exit fullscreen mode

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{
}
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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;
}
Enter fullscreen mode Exit fullscreen mode

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 description

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

Discussion (6)

Collapse
darkwiiplayer profile image
DarkWiiPlayer • Edited on

I still think the problem these naming conventions are trying to solve result directly from people deeply misunderstanding the design and purpose of CSS.

Luckily, the direction CSS is evolving in seems to still follow the path of its intended design, with @scope addressing many of the problems people attempt to fix with conventions like BEM.

Soon, selectors like .nav__link {/* Rules */} could turn into @scope (#main-nav) { a:link {/* Rules */} }

Collapse
anandbaraik profile image
Anand-Baraik

Nicely put everything. Very well explained. 👌🏻

Collapse
preethi_dev profile image
Preethi⚡ Author

Hii Anand-Baraik, appreciate your response and which shows you grasped that concepts🎉. hope we will meet on upcoming blogs. Happy learning.

Collapse
anandbaraik profile image
Anand-Baraik

Yeah sure. Looking forward for your upcoming contents.

Collapse
suhakim profile image
sadiul hakim

very nice job❤

Collapse
preethi_dev profile image
Preethi⚡ Author

Hii sadiul hakim, Happy to see your comment and really appreciate your support.