title | excerpt |
---|---|
BEM |
a methodology and libraries developed and used at Yandex for building user interfaces |
BEM is a methodology and libraries developed and used at Yandex for building user interfaces.
Key concepts of methodology
- Block: logically and functionally independent page component, encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies
- Element: a constituent part of a block that can’t be used outside of it (For example, a menu item)
- Modifier: defines the appearance and behavior of a block or an element
BEM methodology solves common frontend problems:
- Component approach (splitting interface into blocks).
- How to name things (in code and on filesystem).
- How to reuse components (for JS / CSS and all other techs) — for example you can take bem-core library (a collection of common blocks and solutions).
- How to describe components behaviour — i-bem.js library that allows you describe a block logic in declarative style and keep it loosely coupled with others.
- How to generate HTML — declarative template engine bem-xjst for server and browsers.
- How to manage components dependencies and build project — ENB builder.