BEM CSS

CSS is easy to learn? Most would say that yes, mainly because of the facility and the possibility of quickly seeing what we are doing. However, of course, that exists negative points and, when we talk about them, one of the principal is related to maintenance/organization of CSS.

Open a file and writing CSS is very easy and quick; however, give maintenance, organize it, and scale it are not trivial things. As your project grows, you start to lose patience with CSS or break windows get bigger and bigger. A good reading tip is an article (in pt-BR) Scalable CSS do Shankar Cabus.

BEM CSS

Several alternatives/thoughts/methodologies attempt to correct and assist in organizing and structuring a CSS project. One is the BEM (Block Element Modifier), created by the Yandex guys, a Russian search site.

As can be noted, the basic idea is to have three things:

• Block => like a component. The father.
• Element => part (s) which form (s) a block;
• Modifier => A possible status of the two previous items.

Huh?! Imagine a list of items with an active item, something more like this:

Applying the BEM, we have something like this:

I need to admit that some time ago when I discovered the BEM methodology, I thought: “This is so weird!”. All those __ and -- were so strange. But now that I know more about the idea, I can say that it convinced me. Of course, like any other thoughts/methodologies, there are positive and negative points, and it is up to you, give the final word.

Only some topics that I realized using the BEM (but are my opinions):

• Easy perception of things: looking quickly at the HTML markup or CSS, you can understand what each thing does.
• Easier reuse of components.