BEM is a methodology for naming HTML and CSS classes. It is very useful to maintain either a simple or a complex CSS very easily. This sort of naming conventions help coders to understand the components and its internal elements.

1. BEM
Block-Element-Modifier
guptazee.com

2. What is BEM?
BEM is a
methodology
It was coined by a
company named
Yandex located in
Moscow
It is a popular
naming conventions
for classes in HTML
and CSS
guptazee.com

3. What is the
use of BEM?
BEM allows to write maintainable CSS code.
It is used to write reusable CSS components.
Overall, BEM is modular, flexible and easy to learn.
guptazee.com

4. Benefits of
BEM over
Traditional CSS
approach
BEM can help to
know what a CSS
selector does just
by reading out its
name.
This naming
convention also
tells where a
selector can be
used.
One can find out
the relationships
between class-
names just by
reading out the
name.
BEM divides the
user interface (UI)
into independent
blocks.
guptazee.com

5. How to use
BEM (Block,
Element,
Modifier)?
• Block- As it has been mentioned earlier, BEM divides the UI into
independent blocks. The ‘block’ signifies a component, or a standalone
object on the page. The classes can be named after each such block.
• Element- it lives within a block. It signifies a single part of a component.
There can be multiple elements in a component that together make up a
whole feature of the block. These classes can be named by prefixing by
block’s class, followed by double underscores. For example: .block_
_element
• Modifier- when block or element has some sort of variants in terms of
color, size and appearance then the classes further can be expanded.
Here, the classes would be prefixed by block’s or element’s class, followed
by double hyphens. For example: .block--modifier or .block_ _element--
modifier
guptazee.com

6. Real World
Example
• Let’s take an example of a modal that has been used in an application.
• Here, the modal can be considered as a component and it can be targeted by using a class at
the block level, say .modal.
• Now, a modal can have few common elements like a header, a body and a footer.
• So, the modal header can have a class .modal_ _header, its body can have .modal_ _body and
its footer element can be named as .modal_ _footer. These three elements are the basic
elements of a modal.
• Further, a modal can be sized as full-screen, mid-sized or a smaller one. Hence, we can have
three variants of the modal. So, its classes can be written as .modal--full, .modal--mid, and
.modal--small
• There are also chances that its element can have some variants like header can be in black color
or body contents are centrally aligned and footer is disable. Now, the classes for these elements
can be written as .modal_ _header--black, .modal_ _body--center and .modal_ _footer--
disable.
• In this way, you can see that the classes defined above are relevant to a single component and
that is a .modal.
guptazee.com

7. Few More Instances
• A button can also be a component. e.g. .button
• It can also be have size and color variants. e.g. .button- -small, .button- -
large
• It can be primary and secondary. e.g. .button- -primary, .button- -
secondary
• It can also have elements like header and label. e.g. .button_ _header,
.button_ _text
guptazee.com

8. Summary
• This is how BEM methodology works. By following this naming
convention, one can easily make his CSS scalable, maintainable,
and reusable.
• It also helps to reduce specificity of a selector.
• Since, each components are independent blocks. Hence, it can
be re-used easily without thinking of code mess-ups.
• As says, comments are must thing. One should write as much
comments as he feels it should be. It helps other coders to
understand your mindset and strategies.
• At last not the least, BEM is not exceptional you can use
conventions of your own as well. But, it should be in the same
way as BEM says, then only one can be benefitted.
I am really thankful for your
valuable time.
guptazee.com