Family of markup languages for displaying information viewable in a web browser.
The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. It was developed by the team at Yandex and is a powerful way of defining and organizing your CSS.
BEM stands for Block, Element, Modifier. It's a methodology that provides a structured approach to organizing your CSS code, making it easier to understand and scale.
The BEM methodology involves a specific naming convention that follows this pattern:
.block {} .block__element {} .block--modifier {}
.block
represents the higher level of an abstraction or component..block__element
represents a descendent of .block
that helps form .block
as a whole..block--modifier
represents a different state or version of .block
.Here's an example of how BEM can be implemented in CSS:
/* Block component */ .button {} /* Element that depends upon the block */ .button__price {} /* Modifier that changes the style of the block */ .button--orange {} .button--big {}
In this example, .button
is the block, .button__price
is an element within the block, and .button--orange
and .button--big
are modifiers.
The BEM methodology has several advantages:
However, BEM also has a few disadvantages:
Despite these disadvantages, BEM remains a popular methodology for structuring CSS due to its scalability and modularity. Understanding and implementing BEM can significantly improve your CSS code organization and efficiency.
Good morning my good sir, any questions for me?