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
Standalone entity that is meaningful on its own.
A part of a block that has no standalone meaning and is semantically tied to its block.
and to use element you should use this syntax
A flag on a block or element. Use them to change styles or behavior.
and to use modifier you should use this syntax
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__footer , also we have a modifier
BEM methodology benefits…
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.
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.
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.