After I finished my project. My CSS file became a huge, ungainly mess. One front-end methodology would have saved me a lot of pain and cleaned up my code: BEM (Block Element Modifier), a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict. But, in a professional setting, BEM (or the alternative methodology of your choice) becomes indispensable for efficiency and clarity of code — especially when paired with SASS. BEM isn’t the only naming methodology out there, but it’s the one we use here at Tajawal. So, what do we like about it?

• BEM makes collaboration easy : Diving into another developer’s project or developing a project with a team has its challenges. People get comfortable in their own naming conventions for CSS selectors, which may be quite different than your own. Using BEM removes this issue. It provides a clear architecture and recognizable terminology for use across projects and among developers.
• It’s modular : 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.
• 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.
• Structure: BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

Basics

BEM describes relationships between the items in our HTML markup.

• Blocks: Blocks describe a standalone, high-level object on the page — in other words — a page component. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.

  

• Elements: Parts of a block and have no standalone meaning. Any element is semantically tied to its block. They depend on their parent block for meaning, and can’t be moved around the page arbitrarily.

  

• Modifiers: Flags on blocks or elements. Use them to change appearance, behavior or state. Let’s say we want the block__elem to be styled differently to highlight it. We could add a class like .block__elem--highlight to make those style changes.

  

Gnereral Rules

Here are some general principles that help guide BEM methodology

• Stay flat: Just because your BEM naming describes blocks’ and elements’ relationships to each other doesn’t mean it’s a literal description of the DOM tree. You should never have a class name describing a grandchild element like this: .block__element__element

• Avoid high specificity: One of the values of BEM is that it (mostly) keeps everything at the same level of specificity (no IDs, no use of HTML elements in CSS selectors like .class > ul). Ask yourself, how can I target an element without increasing specificity?

• Maintain modularity: Always question whether nested blocks are independent of their parent containers. If they are, they can also be named independently of the parent containers.