Introduction to BEM Methodology
-
Upload
merixstudio -
Category
Technology
-
view
145 -
download
1
Transcript of Introduction to BEM Methodology
![Page 1: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/1.jpg)
BEM Methodology Jacek Spławski
Poznań, January 2016
![Page 2: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/2.jpg)
We are not designing pages, we are designing systems of components.
— Stephen Hay
![Page 3: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/3.jpg)
Modularity is requirement of maintainable systems.
— Ben Callahan
![Page 4: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/4.jpg)
OOCSS / SMACSS / BEM / Atomic / SUITCSS
![Page 5: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/5.jpg)
BEM is a naming convention for classes in HTML and CSS.
![Page 6: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/6.jpg)
Created by Yandex — one of the leading internet companies in Russia.
![Page 7: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/7.jpg)
Block Element Modifier
![Page 8: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/8.jpg)
Block is standalone entity that is meaningful on its own.
![Page 9: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/9.jpg)
Blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
![Page 10: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/10.jpg)
Block names may consist of lowercase Latin letters, digits, and dashes. Individual
words within names are separated by a dash.
.block
![Page 11: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/11.jpg)
Block name should identify block and say what it is responsible for. The block name
replaces IDs.
![Page 12: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/12.jpg)
Element is parts of a block and have no standalone meaning. They are semantically tied to its block.
![Page 13: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/14.jpg)
Modifier are flags on blocks or elements. Use them to change appearance or
behavior.
![Page 15: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/16.jpg)
DOM Tree → BEM Tree
![Page 17: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/17.jpg)
Sass ♥ BEM
.block { &——modifier {} &__element {} }
=
.block {}
.block——modifier {}
.block__element {}
![Page 18: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/18.jpg)
BEM ? JS
![Page 19: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/19.jpg)
jQuery BEM Helpers jQuery BEM Plugin i-BEM framework by Yandex
![Page 20: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/21.jpg)
long class names which could look’s weird develop the habit to properly name class modular thinking
![Page 22: Introduction to BEM Methodology](https://reader034.fdocuments.us/reader034/viewer/2022042618/58a9ab211a28ab9c758b5719/html5/thumbnails/22.jpg)
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/