Menu

Showing posts with label BEM methodology. Show all posts
Showing posts with label BEM methodology. Show all posts

BEM methodology in HTML and CSS

The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project. Here’s how it works:

  1. Block: A top-level abstraction of a new component (e.g., a button). It acts as a parent and is represented by a class like .btn.

  2. Element: Child items placed inside the block. They are denoted by two underscores following the block’s name (e.g., .btn__price).

  3. Modifier: Changes the style of the block without affecting unrelated modules. Modifiers are appended with two hyphens (e.g., .btn--orange).

By following BEM, developers can create reusable components, easily see existing modifiers and children, and maintain consistent naming for better communication within the team.

References:

  1. https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
  2. https://css-tricks.com/bem-101/
  3. https://en.wikipedia.org/wiki/CSS