BEM (Block-Element-Modifier) is a methodology for naming CSS classes in order to make the codebase more readable and maintainable. BEM uses a combination of block, element, and modifier classes to create a clear hierarchy of CSS selectors.
- Block: represents a standalone component that can be reused across the project.
- Element: represents a part of a block that has no standalone meaning.
- Modifier: represents a variant or extension of a block or element.
he key features of the BEM (Block-Element-Modifier) method for CSS are:
- Naming Convention: BEM uses a specific naming convention to create a clear hierarchy of CSS selectors. The naming convention is block, element, and modifier, with double underscore and double hyphen notation to separate them. For example,
.block__element--modifier - Modularity: BEM encourages modularity and reusability of CSS classes by creating standalone components called blocks that can be reused throughout the project.
- Clear Relationships: BEM makes it clear how different parts of the codebase relate to each other by using a specific naming convention.
- Scalability: BEM helps to manage the growing complexity of the CSS codebase by providing a clear structure for organizing the code.
- Maintainability: BEM makes it easier to find and fix bugs by providing a clear structure for organizing the code.
- Independent Styling: BEM allows for independent styling of elements, which can be changed without affecting the entire component.
- Performance: BEM allows for better performance by making it easy to target specific elements, and reducing the chances of accidentally affecting other parts of the codebase.
BEM CSS Examples
The syntax of BEM is super straightforward.
- .block
- .block — modifier
- .block__element
- .block__element — modifier
Block:
It’s an upper-level component or the main block.
Example:
- (.card)
- (.header)
- (.button)
Element:
Elements are the pieces that build a block.
Example:
- (.card__image)
- (.card__title)
- (.card__description)
- (.card__description--timestamp)
- (.button__primary)