Although CSS and HTML are two of the most important elements, it is not only enough to know them, and more if we work in a development team, since there are usually conflicts when making our code. To do this in this blog we will talk about a powerful frontend methodology:
BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into separate blocks. This makes interface development easy and fast even with a complex user interface, and allows the reuse of existing code without copying and pasting.
Normal structuring of a WEB page:
<section class="image-text"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h2 class="title">Lorem ipsum dolor</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem assumenda, quos odit animi, earum quam distinctio debitis. <button class="btn ">More Info</button> </div> </div> </div> </section>
Structuring with BEM:
<section class="image-text"> <div class="container"> <div class="row image-text__content"> <div class="col-sm-6"> <h2 class="image-text__title">Lorem ipsum dolor</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem assumenda, quos odit animi, earum quam distinctio debitis. <button class="image-text__btn ">More Info</button> </div> </div> </div> </section>
Block: a BEM block is the parent container of several elements. In the previous example our block would be the section that has as an image-text class.
Example:
<section class="block-name"> </section>
Element: a BEM element is a composite part of a block that cannot be used separately, since every element must have a block as its parent. In our previous example the elements would be the title, the text and the button.
Example:
<section class="block-name"> <h2 class="block-name__element1">Lorem ipsum dolor</h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem assumenda, quos odit animi, earum quam distinctio debitis. <button class="block-name__element3 ">More Info</button> </section>
Modifier: a BEM modifier is an entity that defines the appearance, status or behavior of a block or element.
Example: In this example, we will show how to use a modifier in an element, where the button has the “disabled” modifier, this is to apply a specific style to this element.
<section class="block-name"> <button class="block-name__element block-name__element_disabled ">More Info</button> </section>
In SASS, for example, styles will be defined like this:
.block-name{
&__element1{
&_disabled{}
}
&__element2{}
&__element1_disabled{}
}
In the previous structures we can see that our CSS is more organized and reusable, and that our HTML structure is easy to understand. Thus all the members of our team will know what each element refers to and they will not be overwriting styles. The BEM methodology helps you and your team understand each other in a more friendly way and that there is no conflict when making code, as long as you and your team follow the basic rules of BEM.