HTML : BEM (Block Element Modifier)

BEM (Block Element Modifier) is a popular naming convention and methodology for organizing and structuring CSS classes in web development. It provides a systematic approach for naming and styling HTML elements to enhance code maintainability and reusability.

The BEM methodology follows a specific naming convention that consists of three parts: Block, Element, and Modifier.

1. Block: A block represents a standalone component or a higher-level element that has a meaningful function within the webpage. It is typically a self-contained entity that can be reused across different sections of the site. Block names are written in lowercase and can include hyphens. For example, header, sidebar, button, etc.
2. Element: An element represents a part or a component within a block. It is semantically tied to the block and cannot exist independently outside of it. Element names are written with two underscores (__) following the block name and are also written in lowercase. For example, header__logo, sidebar__item, button__icon, etc.
3. Modifier: A modifier represents a variation or a state of a block or an element. It is used to change the appearance, behavior, or state of a component. Modifiers are written with two dashes (-) following the block or element name. They provide additional context or style variations. For example, button--primary, header__logo--large, sidebar__item--active, etc.

Here's an example of how BEM classes can be structured for a header component:

 

<header class="header">
  <h1 class="header__title">Website Title</h1>
  <button class="header__button header__button--primary">Sign In</button>
</header>

In this example, header is the block, header__title is an element within the block, and header__button--primary is a modifier applied to the button element.

 

By following the BEM methodology, you can create clear, modular, and reusable CSS classes that are easy to understand and maintain. It helps in avoiding specificity conflicts, encourages a component-based approach to styling, and improves collaboration among developers working on the same codebase.

 

It's important to note that while BEM provides a structured naming convention, it does not prescribe any specific CSS architecture or methodology. It can be used in conjunction with other approaches like CSS frameworks, CSS preprocessors, or component-based frameworks to build scalable and maintainable CSS code.