Quick start with BEM methodology

There are a lot of methodologies like BEM, SMACSS & OOCSS that we can use them to reduce the CSS footprint, organize cooperation among programmers and maintain large CSS codebases. We find these methodologies are used in large projects like Twitter and Facebook, but other projects often grow into some “Huge CSS file” state pretty quickly.

for sure, no matter which methodology you should use anyway you will benefit from the advantages of more structured CSS and UI.

Now let’s take a look about what is BEM?

it stands for Block, Element and Modifier

Block

Standalone entity that is meaningful on its own.

Examples — panel, container, form

Element

A part of a block that has no standalone meaning and is semantically tied to its block.

Examples — panel header, container title, form input

and to use element you should use this syntax blockName__elementName

Modifier

A flag on a block or element. Use them to change styles or behavior.

Examples — highlighted , disabled

and to use modifier you should use this syntax blockName--modifierName or elementName--modifierName

Basic Example.

now we need to create a panel using HTML, SASS and BEM methdology

like you see in the above example we have a block and its name is panel also there are some elements like panel__header , panel__body and panel__footer , also we have a modifier panel--primary

BEM methodology benefits…

1- Structure

BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

2- Avoid descendant selector

The descendant selector is very costly, as the browser must check for a match with every descendant element. On a complex web page, this can result in thousands and thousands (perhaps even more) of descendant selector searches. It is so expensive because the relationship isn’t restricted to parent and child. As such, I prefer to avoid it whenever possible.

3- Modularity

Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.

You also get the ability to transfer blocks from your finished projects to new ones.

4- Reusability

Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.

With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.