BEM Methodology

The basics, main principles, use BEM with Sass, use BEM with JS, pros and cons of BEM methodology

Transcript

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/