Downloaded 2,912 times
Uploaded byIn a Rocket
Learn BEM: CSS Naming Convention
The document explains the BEM (Block Element Modifier) naming convention for CSS and HTML classes, developed by Yandex. BEM helps create modular and reusable components by defining a clear structure for class names: blocks represent standalone entities, elements are parts of blocks, and modifiers adjust the appearance or behavior. It provides examples of how to implement BEM syntax in CSS and HTML with practical code snippets.
More Related Content
Similar to Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
- 1. inarocket.com Learn at rocketspeed BEMCSS NAMING CONVENTION
- 2. Learn front-end developmentat rocket speed inarocket.com by miguelsanchez.com
- 3. in a ROCKET BEM FUNDAMENTALS UnderstandingBEM 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 Howit 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 BEMsyntax you can start using right now
- 19. BEM SYNTAX $150 SUBSCRIBENOW 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 alsointerested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
- 26. Learn front-end developmentat rocket speed inarocket.com by miguelsanchez.com
- 27. inarocket.com Learn at rocketspeed BEMCSS NAMING CONVENTION