Understanding of CSS BEM
Tags: css, html, webdev, todayilearned
Published: 2021-12-26 13:20:54

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 <b>unmaintainable CSS codebase</b> and crack out our plans😥😥 be like.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3ml9vr5msdpccydpuud.gif)

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

<h2>BEM - <b>B</b>lock <b>E</b>lement <b>M</b>odifier</h2>
BEM is constructed on basis of <code>class name</code> selector only which not use <code>id</code> or <code>tag name</code> selector.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aklp29j5edmy6p3zg56o.png)

Above image seems little bit weired😥. It's not a big deal and hope keep continue reading and you grasp that tricks🎉.
 
<h2>Block</h2>
Block is a standalone entity that is meaningful on its own and is a top-level abstraction of a new component.

For instance, 
- <code>header</code>
- <code>container</code>
- <code>menu</code>
- <code>checkbox</code>
- <code>input</code>

<h4>Naming</h4>
Block names may consist of <b>Latin letters, digits, and dashes</b>. To form a CSS class, add a short prefix for namespacing: <code>.block</code>

```css
// Blocks are named as standard CSS classes
.block {
}
//example 
.card {
}
```
<hr>
<h2>Element</h2>
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,
- <code>menu item</code>
- <code>list item</code>
- <code>checkbox caption</code>
- <code>header title</code>

<h4>Naming</h4>
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: <code>.block__elem</code>

```css
// Elements declared with 2 underscores, after block
.block__element {
}
//example
.card__title{
}
```
<hr>
<h2>Modifier</h2>
Flags on blocks or elements. Use them to change appearance, behavior or state. 
> <em>In simple words, the use of a ‘modifier’ to apply the additional unique styles.</em>

For instance,
- <code>disabled</code>
- <code>highlighted</code>
- <code>checked</code>
- <code>fixed</code>

<h4>Naming</h4>
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 (<code>--</code>): 
- If block's modifier, then <code>.block--mod</code>.
- If Element's modifier, then <code>.block__elem--mod</code>.

```css
// 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).

{% codepen https://codepen.io/preethi-dev/pen/OJxxojO %}

<h2>I can get your question🤔</h2> 
there are so many naming conventions like <code>OOCSS</code>, <code>SMACSS</code>, <code>SUITCSS</code>, <code>Atomic</code>. But, why we choose BEM?? right.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j17aknvmo41a0q3ev2eq.gif) 

<h2> The answer is..</h2>
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.)
> <em>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.</em>

<h2>Use BEM as it way</h2>
ofcourse you can break down the rule of BEM like below,

```css
//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.

<h2>Final instance for BEM</h2>
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybnz1whsb4a2qkz6zmhz.png) 

<em>Image credits goes to <a href="https://9elements.com/bem-cheat-sheet/#card+ii">99elements</a></em>

let's test BEM skills. From above image, can you identify which one is <code>block</code> / <code>element</code> / <code>modifier</code>. 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!!
<b>Preethi</b>
<em>- Make your CSS life easier</em>