The document discusses the BEM (Block Element Modifier) methodology for organizing CSS and HTML structures, emphasizing modularity and maintainability in design systems. It explains the essential components of BEM, including blocks, elements, and modifiers, with guidelines for naming conventions. Additionally, it highlights resources for further exploration of BEM and its applications in web development.

1. BEM Methodology
Jacek Spławski
Poznań, January 2016

2. We are not designing pages, we are
designing systems of components.
— Stephen Hay

3. Modularity is requirement of maintainable
systems.
— Ben Callahan

4. OOCSS / SMACSS / BEM / Atomic / SUITCSS

5. BEM is a naming convention for classes in
HTML and CSS.

6. Created by Yandex — one of the leading
internet companies in Russia.

7. Block Element Modifier

8. Block is standalone entity that is
meaningful on its own.

9. Blocks can be nested and interact with each
other, semantically they remain equal;
there is no precedence or hierarchy.

10. Block names may consist of lowercase
Latin letters, digits, and dashes. Individual
words within names are separated by a
dash.
.block

11. Block name should identify block and say
what it is responsible for. The block name
replaces IDs.

12. Element is parts of a block and have no
standalone meaning. They are
semantically tied to its block.

13. Element names may consist of Latin
letters, digits, dashes and underscores.
CSS class is formed as block name plus
two underscores plus element name.
.block__element

14. Modifier are flags on blocks or elements.
Use them to change appearance or
behavior.

15. Modifier names may consist of Latin
letters, digits, dashes and underscores.
CSS class is formed as block’s or
element’s name plus two dashes.
.block__element——modifier

16. DOM Tree → BEM Tree

17. Sass ♥ BEM
.block {
&——modifier {}
&__element {}
}
=
.block {}
.block——modifier {}
.block__element {}

18. BEM ? JS

19. jQuery BEM Helpers jQuery BEM Plugin
i-BEM framework by Yandex

20. no dependencies on other elements
reduce cascading problems reduce
amount of CSS code create ready blocks
library simple and understandable
structure in CSS and HTML code Sass
loves BEM drop tag names and IDs

21. long class names which could look’s
weird develop the habit to properly name
class modular thinking

22. https://css-tricks.com/bem-101/
http://getbem.com/
https://en.bem.info/
https://www.smashingmagazine.com/
2012/04/a-new-front-end-methodology-
bem/