Why BEM naming with SASS nesting? - Purpose & Use Cases

The Big Idea

Discover how a simple naming trick with nesting can save you hours of styling headaches!

The Scenario

Imagine you are styling a website with many buttons, cards, and headers. You write CSS classes like .button, .button--primary, .card__title, and so on, but you write each style separately and repeat the block names everywhere.

The Problem

Writing all these class names fully every time is tiring and easy to mess up. You might forget part of the name or write inconsistent styles. Also, your CSS file becomes long and hard to read because related styles are scattered.

The Solution

BEM naming combined with SASS nesting lets you write styles in a clear, organized way. You write the block once, then nest elements and modifiers inside it. This keeps your code clean and easy to maintain.

Before vs After

✗ Before

.button { color: blue; }
.button--primary { color: white; background: blue; }
.button__icon { margin-right: 0.5rem; }

✓ After

.button {
  color: blue;
  &--primary {
    color: white;
    background: blue;
  }
  &__icon {
    margin-right: 0.5rem;
  }
}

What It Enables

You can write CSS that is easier to read, update, and scale, making your stylesheets neat and your workflow faster.

Real Life Example

When building a website with many components like menus, cards, and buttons, using BEM with SASS nesting helps you keep all related styles grouped, so you quickly find and change them without confusion.

Key Takeaways

BEM naming keeps class names meaningful and consistent.

SASS nesting groups related styles inside blocks.

Together, they make CSS easier to write and maintain.