BEM (Block-Element-Modifier)
BEM is a popular CSS naming convention that stands for Block-Element-Modifier. It is a method for naming CSS classes that makes it easier to understand the relationships between the different styles in a stylesheet and apply them consistently across a website or application.
In BEM, a block is a standalone component of a web page or application, such as a header, footer, or navigation menu. An element is a part of a block that performs a specific function, such as a menu item or a form field. A modifier is a variant of a block or element that can be used to change its appearance or behavior.
For example, a navigation menu might be a block called .nav, with elements such as .nav__item for each menu item and a modifier called .nav--primary that changes the appearance of the menu. This convention makes it easy to see the relationships between styles and apply them consistently across a website. It also makes it easier to update or add new styles, since you can clearly see how they relate to existing styles.
Here is an example of how you might use BEM naming conventions to name the styles for a simple web page:
Copy code/* Block: header */
.header {
/* styles for the header block */
}
/* Element: header title */
.header__title {
/* styles for the title element within the header block */
}
/* Element: header navigation menu */
.header__nav {
/* styles for the navigation menu element within the header block */
}
/* Modifier: header with a light background color */
.header--light {
/* styles for the header block with the light background color modifier */
}
/* Block: main content */
.main {
/* styles for the main content block */
}
/* Element: main content title */
.main__title {
/* styles for the title element within the main content block */
}
/* Element: main content paragraph */
.main__p {
/* styles for the paragraph element within the main content block */
}
/* Modifier: main content with a dark background color */
.main--dark {
/* styles for the main content block with the dark background color modifier */
}
This naming convention makes it clear how the different styles on the page are related to each other and how they can be used to create the desired layout and appearance. It also makes it easier to understand how to apply new styles or update existing ones.
