BEM
BEM

https://en.bem.info

BEM stands for Block, Element, Modifier and is a naming convention for classes in HTML and CSS. It was developed by Yandex with the aim of making the code more modular and maintainable. In BEM, a "Block" refers to a standalone component or UI element on a webpage. An "Element" is a part of the block that has no meaning outside of the block. Finally, a "Modifier" is a variation or state of the block or element. Using this convention, each class name has a clear and descriptive meaning, making it easier to understand the purpose of each element and style them accordingly. BEM also helps to prevent naming conflicts and makes it easier to work collaboratively on a project. For example, if we had a button component on our webpage, we could use the BEM naming convention to name its elements like this: - `.button` for the block - `.button__icon` for an element inside the button - `.button--disabled` for a modifier that indicates the button is disabled This approach makes it easier to style and modify individual components without impacting other parts of the page.

Read more

214 Companies using BEM

NameLinksEmployeesRevenueTrafficCountrySEOIndustry
logo
J&P Cycles

keeping the world on two ..

143$36K - $18K$2M united states ..70%
logo
ITZU Nederland

it's you we care about!

6$16K - $27K$27K netherlands85%
logo
Yandex

yandex is a technology co..

8,293$16K - $24K$192M russian federa..100%
logo
ITZU Talent Recruitment

it's you we care about!

173$39K - $11K$27K belgium85%
logo
Yandex.Taxi

560$42K - $15K$192M -100%
logo
ITZU Group

it's you we care about!

94$17K - $14K$27K belgium85%
logo
Domo Sports Grass

domo® sports grass is a w..

36$13K - $41K$20K belgium52%
logo
Avocado Store GmbH

online marktplatz für eco..

45$17K - $48K$1M germany83%
logo
Dropsolid Digital Experie..

connecting human needs wi..

77$36K - $38K$80K belgium62%
logo
Kangaroot Linux & Open So..

kangaroot has more than 2..

23$10K - $24K$59K belgium83%
logo
Inagro vzw

research & advice in agri..

176$27K - $28K$79K belgium18%
logo
VISITFLANDERS Convention ..

come create tomorrow's he..

14$15K - $27K$61K belgium93%
logo
Provincie Vlaams-Brabant

de provincie vlaams-braba..

552$27K - $7K$43K belgium91%
logo
ELSCOLAB

we keep your applications..

62$45K - $35K$66K belgium46%
logo
VeriPark

enabling financial instit..

803$46K - $16K$69K united kingdom..73%

Want to download the entire list?

Enter your email and download the entire list of 214+ companies

We care about your data. Read our privacy policy.

How to use BEM

BEM is a naming convention that helps you write better, more maintainable CSS and HTML code. It consists of three parts: Block, Element, and Modifier.

The first part of BEM is the block, which is a standalone component on a page. A block can be anything from a header to a navigation menu to a form. Each block has its own unique name, and all of the classes associated with that block begin with that name.

The second part of BEM is the element. An element is a part of a block, and it should only exist within that block. Elements are identified by the block's name, followed by two underscores and the element's name. For example, if we have a header block with a logo element, the class for that element would be

.header__logo
.

The final part of BEM is the modifier. Modifiers are used to change the appearance or behavior of a block or element. Modifiers are indicated by a double hyphen (

--
) in the class name. For example, if we want to change the color of our logo to white, we could add a modifier class like this:
.header__logo--white
.

Here's an example of how you could use BEM in your HTML and CSS:

<div class="header"> <img class="header__logo header__logo--white" src="logo-white.png" alt="Logo"> <nav class="header__nav"> <ul class="header__nav-list"> <li class="header__nav-item"><a class="header__nav-link" href="#">Home</a></li> <li class="header__nav-item"><a class="header__nav-link" href="#">About</a></li> <li class="header__nav-item"><a class="header__nav-link" href="#">Contact</a></li> </ul> </nav> </div>
.header { /* styles for the header block */ } .header__logo { /* styles for the logo element */ } .header__nav { /* styles for the nav element */ } .header__nav-list { /* styles for the nav list element */ } .header__nav-item { /* styles for the nav item element */ } .header__nav-link { /* styles for the nav link element */ } .header__logo--white { /* modifier styles for a white logo */ }

In this example, we have a header block with a logo element and a navigation menu element. We've used BEM naming conventions to create classes for each of these components, which makes our HTML and CSS easier to read and understand. We've also used a modifier class to change the color of the logo to white.

Overall, using BEM can help you write more maintainable and organized code. By following a consistent naming convention, you can avoid naming conflicts and make it easier to understand how your HTML and CSS are structured.

Make your sales data-driven.

Website's technology stack, including its CMS, ecommerce platform, and payment processor, along with details about the industry, company and its contacts.

GDPR Compliant

CCPA Compliant

SOC2 Compliant

App screenshot