CSS Block Element Modifier

We all have names for everything – our cats, dogs and maybe even that cow we are about to kill. But how come we do not name our CSS codes? The sad thing is that so many programmers and developers tend not to name the CSS codebase they are using.

This does not mean that their programs won’t work but imagine one of the websites or software you are developing has a bug at someplace after you have done a lot of work.

If you do not name your codes, it would be difficult for you to debug it. And debugging in that kind of situation is very difficult. This is because you can make some errors while debugging that can become bugs in themselves.

This is unsustainable on the long run and you may find yourself having to run the whole code again just to fix a single bug. The way to avoid this is to name your CSS codebase. This way you could quickly make modifications to the codes using the name and not have to do much tampering with your codebase.

This prevents errors which may further complicate debugging. The way to do this is by using the system of block element modifiers. In summary, proper naming of your codebase prepares you for making corrective adjustments to your website later on. We are going to take a look at the components of the Block Element Modifiers (BEM) individually.

The Block:

This is the first part of the BEM. It can stand on its own. It is usually the parent name. In simple terms, your codes for a particular class should be named using Blocks. Blocks can interact with each other but they do not supersede each other.

They are independent and can stand on their own. Block names could be in Latin letters, digits and dashes. To make it a CSS class, you have to add the block as a short prefix for name spacing.

For example, if you want to name your code with a block, you would use something like “.name”. Let’s say for example I want to make a code and I want the code to be named cups in CSS, I would add the block:

.cups { }

(.block { })

Example:

<button class=”btn”></button>

<style>

  .btn { }

</style>

The Element:

Great! we have given our codebase a name. Now we want to add other variables that are dependent on the block. We can do this by adding an element.

An element is a child of the block. That is the block is higher in the hierarchy than the element and any codebase that is under the element is controlled by the block. Let’s use the block we have added before in CSS named Cups. If we want to add some dependent elements like – let’s say, mugs and tumblers.

We can do this by making them children of the block which in this case is named Cups. Here is how we would write that in CSS – We would have to put two underscores after the block name before we input the elements. Like this:

.cups__mugs { }

.cups__tumblers { }

.block__element { }

Example:

<figure class="photo">

  <img class="photo__img" src="me.jpg">

  <figcaption class="photo__caption">Look at me!</figcaption>

</figure>

<style>

  .photo { } /* Specificity of 10 */

  .photo__img { } /* Specificity of 10 */

  .photo__caption { } /* Specificity of 10 */

</style>

The modifiers:

Now we have a block as a name and we have two elements which depend on the block. Now we may need to change the appearance of the block or to change the feature of the block.

Adding a modifier to the block will change the block in some way. For example, if we want the cup to be modified by the word “orange” we can add orange as a modifier.

We can do this by adding two hyphens in front of the block name (cups in this case) and then add the modifier which is orange. An example of this in CSS is:

.cups--orange { }

.block--modifiers { }

If we want to add another modifier like say “hidden” we can type in the code

.cups--hidden { }

We can also decide to use modifiers to alter the elements in my block. For example, let’s say we want to give our mug an attribute of orange, we can enter a CSS code like this:

.cups--orange .cups__mug { }

.block--modifiers .block__element { }

This will make mug take on the attribute of orange which is also an attribute of the block. However, if we want the element to have its own unique attribute let's give it a modification of big. We can enter it this way:

.cup__mug--big { }

.block__element--modifiers { }

More examples:

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

<style>

  .btn {
    display: inline-block;
    color: blue;
 }

  .btn--secondary {
    color: green;
  }  

</style> 

Putting it together:

We have given you a look at how to add different parts of the Block Element modifier (BEM) separately. But we have to bring everything together so it makes more sense to you. So, if we were to write the BEM at once in CSS it will look something like this:

.cups { }

.cups__mugs { }

.cups__tumblers { }

.cups--orange { }

.cups--hidden { }

.cups--orange .cups__mug { }

.cups__mug--big { }

Conclusion:

What we have done is this, we created a block by the name Cups. We then added two elements which are children of the block which are mug and tumbler. We then modified Cups by giving them the attributes orange and hidden.

Next, we modified the element mug so it can express the orange the same way its parent – cups – does. Next, we decided to give the element mug to have its own unique attribute which is “big”.

So, in summary, the block which is cups controls the element which is mug and is altered by modifiers like orange and hidden. The modifier orange affects the cups and the mug while hidden affects just the cups. The modifier big affects just the mug. That is the summary of how a block element modifier works.