BEM - A simple CSS methodology

A short introduction to the BEM methodology for writing CSS.

Transcript

1. BEM Easy. Modular. Flexible.
2. What comes to your mind when you think of CSS?
4. And CSS in a big project?
6. Why?
7. Why do we have a low bar in terms of CSS code quality?
8. Web History • Everything was designed to share documents • CSS had a different intention • Web apps became a thing
9. Several problems
10. Inline CSS Code duplication Browser incompatibility
12. Goals • Reuse code • Organization • Standardization • Modularization • Simplicity
13. BEM Block__Element--Modifier
14. Block Standalone entity that is meaningful on its own.
15. Block Naming Block names may consist of Latin letters, digits, and dashes
16. Element A part of a block that has no standalone meaning and is semantically tied to its block
17. Element An element CSS class is formed as block name plus two underscores plus element name
19. Element An element CSS class is formed as block name plus two underscores plus element name
20. Element An element CSS class is formed as block name plus two underscores plus element name
21. Modifier A flag on a block or element. Use them to change appearance or behavior.
22. Modifier Naming A modifier CSS class is formed as block’s or element’s name plus two dashes
23. Modifier HTML Remember that modifiers only carry modifications!
24. Rule of thumb Use meaningful names
26. Benefits
27. Modularity • Block styles are independent. No cascading problems. • You also get the ability to transfer blocks from your finished projects to new ones.
28. Reusability • Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain. • You can build a library of blocks.
29. Structure • BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.
30. Easy • Only three core elements • No 3rd-party library needed • You can start applying it now
31. That’s it Feel free to ask any question
32. That was just the basics... • https://en.bem.info/methodology/quick -start/ • http://getbem.com/introduction/