http://inarocket.com Learn BEM fundamentals as fast as possible. What is BEM (Block, element, modifier), BEM syntax, how it works with a real example, etc.

1. inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION

2. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com

3. in a
ROCKET
BEM FUNDAMENTALS
Understanding BEM in just 2 minutes

4. LEARN BEM: Block - Element - Modifier
B E M
Is a naming convention
for classes in HTML and CSS
Developed by the team at Yandex.
Block Element Modifier

5. LEARN BEM: Block - Element - Modifier
B E MBLOCK: Encapsulates a standalone entity that is meaningful on its own.
While blocks can be nested and interact with each other, semantically they
remain equal; there is no precedence or hierarchy.

6. LEARN BEM: Block - Element - Modifier
BLOCK

7. LEARN BEM: Block - Element - Modifier
B E MELEMENT: Parts of a block and have no standalone meaning. Any element is
semantically tied to its block.

8. LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT

9. LEARN BEM: Block - Element - Modifier
B E MMODIFIER: Flags on blocks or elements. Use them to change appearance,
behavior or state.

10. LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
ELEMENT

11. LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
+ MODIFIER

12. in a
ROCKET
QUICK EXAMPLE
How it works with a real example

13. LEARN BEM: Block - Element - Modifier
$150 SUBSCRIBE NOW

14. LEARN BEM: Block - Element - Modifier
BLOCK: btn

15. LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text

16. LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + MODIFIER
$150 SUBSCRIBE NOW

17. LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + MODIFIER
$150 SUBSCRIBE NOW
BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT + MODIFIER

18. in a
ROCKET
LET'S CODE
BEM syntax you can start using right now

19. BEM SYNTAX
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
.block
Examples: .btn or .login-form
.block__element
Examples: .btn__price or .btn__text
.block--modifier
Examples: .btn--important
.block__element--modifier
Examples: .btn__text--important
$150 SUBSCRIBE NOW
BLOCKS
ELEMENTS
MODIFIERS

20. LEARN BEM: Block - Element - Modifier
BLOCK: btn
styles.css
/* Block */
.btn { styles here }
CSS
index.html
<a href="#" class="btn"></a>
HTML

21. LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
CSS
index.html
<a href="#" class="btn">
<span class="btn__price">$150</span>
<span class="btn__text">Subscribe now</span>
</a>
HTML

22. LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
/* Modifier: change the style of the block */
.btn--important { styles here }
CSS
index.html
<a href="#" class="btn btn--important">
<span class="btn__price">$150</span>
<span class="btn__text">Subscribe now</span>
</a>
HTML

23. LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
/* Modifier: change the style of the element */
.btn__text--important { styles here }
CSS
index.html
<a href="subscribe.html" class="btn">
<span class="btn__price">$150</span>
<span class="btn__text btn__text--important">Subscribe
now</span>
</a>
HTML

24. USEFUL REFERENCES
LEARN BEM: Block - Element - Modifier
BEM METHODOLOGY: NAMING CONVENTION
The BEM methodology provides an idea for creating naming rules and implements that
idea in its canonical CSS selector naming convention.
bem.info/methodology/naming-convention
CONVENTION BY HARRY ROBERTS
"BEM-like" convention of CSS Guidelines by Harry Roberts.
bem.info/toolbox/sdk/bem-naming/#convention-by-harry-roberts

25. Are you also interested in learning
BOOTSTRAP 4
POSTCSS?
+
http://inarocket.teachable.com/courses/css-postcss
Please visit:

26. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com

27. inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION