DEV Community

Florian Zeba
Florian Zeba

Posted on • Edited on • Originally published at fzeba.com

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.

Please leave your appreciation by commenting on this post!

It takes just one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
kspshnik profile image
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.

Collapse
 
flnzba profile image
Florian Zeba

Thank you. I corrected the title.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay