Block Element Modifier Methodology for CSS

Structure CSS the Object Oriented Way

For developers looking to streamline their CSS with minimal effort, the BEM methodology is a game-changer:

• Simplicity: BEM’s clear naming conventions make your CSS easier to understand and maintain, even for big projects.
• Scalability: Modular design means you can reuse components effortlessly, reducing redundancy and errors.
• Efficiency: Spend less time debugging and more time developing with BEM’s straightforward structure.

The idea is to, as the name says, build a modular CSS system.

• Blocks: These are standalone entities that are meaningful on their own, such as a header, container, or menu.
• Elements: Parts of a block that have no standalone meaning and are semantically tied to their block, for example, a menu item in a navigation block.
• Modifiers: Flags on blocks or elements used to change appearance, behavior, or state, such as disabled, highlighted, or active.

These components help in building a structured, easy-to-maintain CSS architecture.

Other methods would be:

• SMACSS (Scalable and Modular Architecture for CSS)
• OOCSS (Object-Oriented CSS)
• SUITCSS (Structured Class Names)
• Atomic (Small Building Blocks - like Lego)

More Information: BEM CSS.

TL;DR

1. Structured CSS becomes more and more import as the codebase grows
2. BEM is one way to structure your CSS in a maintainable way

Read this article and more on fzeba.com.

Comments

[Evgeny Karpel]

BEM stands for Block - Element - Modifier, not Module.

In sense of BEM, Block is a module unit, an independend thing that might be reused.

[Florian Zeba]

Thank you. I corrected the title.