BEM Simple Naming Convention For CSS Classes

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

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.
• It declares its purpose: When we use BEM’s syntax, it’s easy to skim the markup and understand how elements are styled and related to each other.

THE 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.

HTML: <div class="block">...</div>
CSS: .block { background: red; }

• 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.

HTML: <div class="block">
	  <span class="block__elem"></span>
      </div>
CSS: .block__elem { background: lightgray; }

• 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.

HTML: <div class="block">
	  <span class="block__elem"></span>
          <span class="block__elem block__elem--highlight"></span>
      </div>
CSS: .block__elem--highlight { background: black; }

Here’s what our HTML and CSS might look like:

GENERAL 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.

I hope this post will help you sort through the basic questions that come up when you’re first adopting the methodology. But if you’re still unsure I would recommend looking over the following articles:

CSS Naming Conventions that Will Save You Hours of Debugging

Introducing BEM: The popular CSS naming convention

BEM by Example

And there is another Naming Convention For CSS Classes like SMACSS and OOCSS you can also check theme. Happy coding!