BEM (Block Element Modifier) is a naming convention for CSS classes that helps developers create scalable and reusable styles. It emphasizes the importance of clear and consistent naming conventions for HTML classes and uses a hierarchical approach to class naming that reflects the relationships between different elements on a page.
BEM is a popular naming convention for CSS classes that aims to make it easier to understand the structure and purpose of different elements on a web page. It was created by the developers at Yandex, a Russian search engine company, and has since been widely adopted by web developers around the world.
The basic idea behind BEM is to use descriptive class names that indicate the purpose and context of different elements on a web page. This makes it easier to write and maintain CSS code, and also helps to avoid naming conflicts and unintended side effects.
How to use BEM?
To use BEM, you'll need to follow a few simple rules when naming your CSS classes:
.header {}
.header__logo {}
.header__logo--large {}
Putting it all together, a BEM class name might look like this:
Recommended by LinkedIn
.block__element--modifier {}
Why use BEM?
BEM has several benefits that make it a popular choice for web developers:
Example
Let's say you have a web page with a header that contains a logo and a navigation menu. Here's how you might use BEM to name the CSS classes for this page:
<header class="header" <a href="/" class="header__logo">My Site</a> <nav class="header__nav"> <ul class="header__menu"> <li class="header__menu-item"><a href="/">Home</a></li> <li class="header__menu-item"><a href="/about">About</a></li> <li class="header__menu-item"><a href="/contact">Contact</a></li> </ul> </nav></header>
In this example, we have a header section with a logo and a navigation menu. Each element is given a BEM class name to indicate its purpose and context within the page.
.header background-color: #fff; height: 80px; display: flex; justify-content: space-between; align-items: center;}.header__logo { font-size: 24px; font-weight: bold; color: #333; text-decoration: none;}.header__nav { margin-left: auto;}.header__menu { list-style: none; display: flex;}.header__menu-item { margin-right: 16px;}.header__menu-item:last-child { margin-right: 0;}
In the CSS code, we use the BEM class names to style each element according to its purpose and context within the page.
In the example provided, we see how BEM class names can be used to structure a header section with a logo and navigation menu, and how these class names can be used to write clear and targeted CSS styles. The BEM class names in this example include header, header__logo, header__nav, header__menu, and header__menu-item. These class names reflect the hierarchical relationship between different elements within the header section.
By using BEM class names, developers can more easily understand the purpose and context of different elements on a page, and can write more targeted CSS styles that are less likely to conflict with other styles on the page. This can result in more maintainable, scalable, and reusable code that is easier to work with over time.