Writing Clean and Maintainable Code with BEM CSS

Transcript

1. Writing clean and maintainable code with BEM CSS Axel Andrian axelandrian.me
2. What is BEM? BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
3. Benefit using BEM LONG-LASTING REUSABLE ORGANIZATION
4. B E M BLOCK ELEMENT MODIFIER Standalone entity that is meaningful on its own. A part of a block that has no standalone meaning and is semantically tied to its block. A flag on a block or element. Use them to change appearance or behavior. Header Container Navbar Card Header Title Navbar Item Card Title Disabled Size Color
6. Syntax .block__element--modifier
9. Write the CSS Examples : head img {} -> Don’t do this with BEM #header {} -> Don’t use ID avoid this : .header .header__title .header__title--red {}
10. Framework CSS use BEM CSS Cutestrap
11. Thank you