Why Combining & with BEM naming in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple symbol can save you hours of repetitive typing and mistakes!

The Scenario

Imagine you are styling a website with many buttons and blocks. You write CSS classes like .button, .button--primary, and .button__icon by hand, repeating the block name each time.

The Problem

Writing full class names repeatedly is tiring and error-prone. If you want to rename the block, you must change every single class manually. It's easy to make mistakes and hard to keep styles consistent.

The Solution

Using & in Sass lets you combine selectors smartly with BEM naming. You write the block name once, then add modifiers or elements by appending to &. This keeps your code DRY and easy to update.

Before vs After

✗ Before

.button {}
.button--primary {}
.button__icon {}

✓ After

.button {
  &--primary {}
  &__icon {}
}

What It Enables

This approach makes your styles easier to write, read, and maintain, especially for big projects with many components.

Real Life Example

When building a website header with blocks like header and elements like header__logo or modifiers like header--sticky, combining & with BEM saves time and reduces errors.

Key Takeaways

Writing full BEM class names manually is repetitive and error-prone.

Using & in Sass lets you append modifiers and elements easily.

This keeps your CSS cleaner and easier to maintain.