Modular CSS Using BEM Methodology

BEM (Block, Element, Modifier) is a naming convention to write CSS in a component-based approach. BEM helps to write a more understandable, reusable and scalable CSS.

Transcript

1. Muhammad Naufal — UNIKOM CodeLabs — December, 2019 Modular CSS Using BEM Methodology
2. What is BEM?
3. BEM (Block, Element, Modifier) is a naming convention to write CSS in a component- based approach
4. Why use BEM?
5. Because CSS at scale is difficult
7. BEM helps to write a more understandable, reusable and scalable CSS
8. How does BEM works?
9. The idea of BEM is to divide user interface into independent reusable modules
10. When you use BEM, you should avoid using id for CSS selector, always use class to maintain low-level specificity
11. BEM class name consist of 3 Parts
12. Block 3 Parts of BEM
13. Block is the outmost parent of a component, block defines the purpose (“What is it?” - button, modal, etc) not the state (“How does it look?” - blue, big, etc)
14. Correct, it clearly describes what it is Incorrect, it describes how the button looks Block
15. Nested Block You can have any number of nested block
16. The block shouldn’t influence its environment, do not set external geometry like margin and position for the block
17. Element 3 Parts of BEM
18. Element defines the purpose ("What is it?" - item, text, etc) not the state ("How does it look like?" - bold, red, etc).
19. Element is always a part of a block, and shouldn’t be used without or separately from a block
20. The element name is separated by a double underscore (__) from the block name.
21. [Block]__[Element]
22. Element Classes modal_header, modal_body, and modal_footer are elements of the modal block
23. Correct, you can have any number of nested elements Incorrect, never include more than one element in a class name Nested Element
24. Element is optional for block, not all blocks have elements
25. Should I create a block or an element?
26. Use Block when a section of code might be reused and does not depend on parent entity Use Element when a section of code can’t be used separately without the parent entity
27. Modifier 3 Parts of BEM
28. Modifier defines the state, behavior, and appearance of block or element ("How does it look?" - red, big, etc).
29. The modifier name is separated by a double dash (—) from the block or element name.
30. [Block]—[Modifier] [Block]__[Element]—[Modifier]
31. Block with Modifier Correct, button block with primary modifier
32. Block with Modifier Incorrect, button block is missing, modifier can’t be used alone
33. Correct, you can use dash or camel case to separate multiword name, this also applies to block and element Incorrect, button—outlineprimary is hard to read Multiword Modifier
34. Element with Modifier When there are block, element, and modifier on a class name, it would look like this: [Block]__[Element]—[Modifier]
35. Benefits of using BEM
36. Excellent for Maintaining
37. Class names are logical and intuitive
38. Eliminates nested CSS selectors
39. Okay, That’s All
40. Any Questions?
41. References https://en.bem.info/ https://seesparkbox.com/foundry/bem_by_example https://www.toptal.com/css/introduction-to-bem-methodology
42. Thank You! muhammad_naufal@hotmail.com linkedin.com/in/m-naufal