BEM (Block, Element, Modifier) is a methodology for structuring CSS and HTML code. It aims to avoid name collisions, keep specificity low, and make code more maintainable. Key principles include: 1. Using a naming convention of block-name__element-name--modifier to identify components, their parts, and variants. 2. Organizing CSS and HTML files by component in a flat directory structure to locate code easily. 3. Avoiding global selectors and name prefixes to prevent unintended side effects. 4. Keeping selectors shallow and specificity low to allow flexible overriding without !important declarations.

1. VietnamThailandSingaporePhilippinesMalaysiaIndonesia Russia
Changing styles quickly, without fear and pain

2. CSS
IS
AWESOME

3. Specificity
1
2
3
4
style="color: red"
#content
.link, link:active, link[href]
body, body::after

4. Specificity weights
inline IDs
classes
pseudo-classes
attributes
elements
pseudo-elements
Most
specificity value
Least
specificity value
, , ,

5. In other words
1
2
3
4
1,0,0,0 — If the element has inline styling, that automatically wins
0,1,0,0 — For each ID value
0,0,1,0 — For each class, pseudo-class, attribute selector
0,0,0,1 — For each element reference

6. Sample calculations
0
inline
1
IDs
2
classes
3
elements
#sidebar ul li a.myclass:hover
, , ,

7. Combining
.item {
color: blue;
}
0
inline
0
IDs
1
classes
0
elements
, , ,
ul li li li li li li
li li li li li li li {
color: red;
}
0
inline
0
IDs
0
classes
14
elements
, , ,
>

8. Important Notes
1
2
3
The universal selector (*) has no specificity value (0,0,0,0)
Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their
psuedo-class brethren which get 0,0,1,0
The pseudo-class :not() adds no specificity by itself, only
what's inside it's parentheses.

9. Same specificity
<p class="message error”>
Broken!
</p>
HTML CSS
.error {
color: red;
}
.message {
color: green;
}

10. Example
#content table {}
/**
* Uh oh! My styles get overwritten by `#content table {}`.
*/
.my-new-table {}

11. Example
#content table {}
#content .my-new-table {}

12. Enter header
!important

13. !important
0
inline
1
IDs
3
classes
1
elements
, , ,
#sidebar .weatherMod .hourly .tuesday h3 {
color: blue !important;
}
0 0 0 0
, , ,
!important
normal

14. !important
Consequences
1
2
3
one more level of complexity
specificity grows even faster
finding out what a rule will be applied still is not easy
4 eventually, working with such code comes to nearly impossible

15. !important
Specificity can, among other things:
1
2
3
limit your ability to extend and manipulate a codebase
interrupt and undo CSS cascading, inheriting nature
cause avoidable verbosity in your project
4
prevent things from working as expected when moved into
different environments
5 lead to serious developer frustration

16. Nature of CSS

17. http://www.thefreedictionary.com
“methodology – the system of methods and
principles used in a particular discipline”
Methodology

18. BEM

19. BEM
Block
Element
Modifier

20. BEM block
Block is a logically and functionally independent page
component, the equivalent of a component in Web
Components.
BLOCK

21. BEM blocks

22. Nested structure

23. Arbitrary placement

24. Re-use

25. BEM element
A constituent part of a block that can’t be used and does
not make sense outside the block.
ELEMENT

26. BEM element

27. BEM modifier
A BEM entity that defines the appearance and behavior of
a block or an element.
MODIFIER

28. BEM modifier

29. BEM naming conventions
1
2
3
Names of BEM entities are written using numbers
and lowercase Latin characters
Individual words within names are separated by a hyphen (-)
Information about the names of blocks, elements,
and modifiers is stored using CSS classes

30. BEM block name
HTML
CSS
EXAMPLE menu, lang-switcher
<div class="menu">...</div>
.menu { color: red; }

31. BEM element name
HTML
CSS
EXAMPLE menu__item, lang-switcher__lang-icon
<div class=“menu">
<span class=“menu__item"></span>
</div>
SCHEME block-name__elem-name
.menu__item { color: red; }

32. BEM modifier name
KEY-VALUE
BOOLEAN .owner-name_mod-name
.owner-name_mod-name_mod-val

33. BEM block modifier
KEY-VALUE
BOOLEAN .menu_hidden
.menu_theme_morning-forest

34. BEM element modifier
KEY-VALUE
BOOLEAN .menu__item_visible
.menu__item_type_radio

35. Alternative naming schemes
block-name__elem-name-mod-name
MyBlock__SomeElem_modName_modVal
blockName-elemName-modName-modVal

36. File system organization
1
2
3
A block implementation is divided into separate parts
Optional elements and modifiers are stored in separate files
Files are grouped by meaning and not by type
4 A project is divided into redefinition levels

37. Block on the filesystem
blocks/
input/ # input block directory
button/ # button block directory

38. Block implementation
blocks/
input/
input.css # `input` block implementation in CSS
input.js # `input` block implementation in JavaScript
button/
button.css
button.js
button.png

39. How actually does BEM address the problems?

40. How BEM helps
The naming convention helps to:
1
2
3
avoid name conflicts
avoid the cascade and keep the specificity for all declarations
on the same low level
write self-documenting code

41. Enter header
BEM file organization has its benefits:
1
2
3
One block - one folder. Easy to combine in the production
build only those blocks which are really used on the page.
All-in-one. Easy to remove blocks or move themto another project.
Plain folders list helps to avoid naming conflicts. You just
cannot add a new folder if name is already taken.

42. A block or an element: when should I use which?

43. Sophisticated file organization

44. Mixes
<a href="/" class="link">
Some link
</a>
HTML CSS
.link {
color: blue;
}

45. Mixes
<nav class="menu">
<a class=“menu__item
menu__item_link”>
…
</a>
<a class=“menu__item
menu__item_link”>
…
</a>
</nav>
HTML CSS
.menu { … }
.menu__item { … }
.menu__item_link {
color: blue;
}

46. Mixes
<nav class="menu">
<a class=“menu__item
link”>
…
</a>
<a class=“menu__item
link”>
…
</a>
</nav>
HTML CSS
.menu { … }
.menu__item { … }
.link {
color: blue;
}

47. Container-content pattern
<nav class="menu">
<span class="menu__item">
<a class=“link”>…</a>
</span>
<span class="menu__item">
<a class=“link”>…</a>
</span>
</nav>
HTML CSS
.menu { … }
.menu__item { … }
.link { … }

48. Preprocessors mixins
.clearfix { … }
.menu__item {
.clearfix;
…
}

49. Element in element
<nav class="menu">
<span class="menu__item">
<a class=“menu__item__link">
…
</a>
</span>
<span class="menu__item">
<a class=“menu__item__link">
…
</a>
</span>
</nav>
WRONG RIGHT
<nav class="menu">
<span class="menu__item">
<a class=“menu__item-link”>
…
</a>
</span>
<span class="menu__item">
<a class=“menu__item-link”>
…
</a>
</span>
</nav>

50. Why global classes are bad?
.animate { … }

51. Why name prefixes are bad?
.l-grid { … }

52. When I can use a few selectors in one declaration?
.theme-dark-sky .button { … }

53. Bottom line
1
2
3
Keep specificity low at all times
Do not mix a few BEM entities on one node
Do not use global classes and prefixes
4 Keep files related to the same block in the same folder

54. Links
https://en.bem.info
Thank you! Questions?