What is BEM Naming?
BEM stands for Block, Element, Modifier. It’s a systematic way to name CSS classes, making your code easier to read and manage. Think of it like organizing your desk – you wouldn’t just pile everything up; you’d use drawers and labels to keep things neat and accessible.
Why Use BEM Naming?
Using BEM helps you to:
- Keep your code organized: You can quickly identify how different parts of your web page relate to each other.
- Avoid conflicts: BEM names are unique, so you won’t accidentally apply styles to the wrong elements.
- Simplify maintenance: Clear and organized code is more accessible for updating and troubleshooting.
How BEM Naming Works
Blocks
A Block is a standalone component that can be reused. Think of it as a drawer in your desk.
Example: A navigation bar or a button can be considered a Block.
Elements
An Element is a part of a Block that doesn’t make sense on its own and is directly tied to the Block. It’s like the items you keep inside a drawer.
Example: The items inside a navigation bar, like menu links, are Elements of that Block.
Modifiers
A Modifier is a different version of a Block or an Element. It’s like having different sections within a drawer, each with its own label.
Example: A button can have different styles, such as primary, secondary, or disabled, which are Modifiers of the button Block.
Putting It All Together
Let’s visualize a complete example:
- Block: Imagine you have a card component on your website.
- Element: Inside this card, you have a title, a description, and a button.
- Modifier: The button might have different styles, such as blue or red.
Example in Action
- Block:
.card - Element:
.card__title,.card__description,.card__button - Modifier:
.button--blue,.button--red
Breakdown
- Block: The card itself.
- Element: The card’s title, description, and button.
- Modifier: The different styles for the button, like blue or red.
Using BEM, you can clearly see how each part of your web page is styled and how they relate to each other.
Benefits of BEM Naming
- Clarity: You can quickly understand the purpose of each class.
- Reusability: Blocks can be reused across different parts of your site.
- Scalability: Adding new styles becomes easier without disrupting existing ones.
- Collaboration: Other developers can read and understand your code more efficiently.
Conclusion
BEM naming is like having a well-organized desk. It keeps your CSS neat, avoids conflicts, and makes your code easier to maintain. By using Blocks, Elements, and Modifiers, you can create straightforward and scalable styles for your website. As you embark on your web design journey, try BEM and experience the benefits of a well-structured CSS.
