Combining & with BEM naming in SASS - Deep Dive

Overview - Combining & with BEM naming

What is it?

Combining & with BEM naming in Sass means using the ampersand symbol (&) to refer to the current selector inside nested styles, while following the Block Element Modifier (BEM) naming method. BEM is a way to name CSS classes clearly to show their role and relationship. Using & with BEM helps write clean, organized, and reusable styles by nesting related parts together.

Why it matters

Without combining & and BEM, CSS can become messy and hard to maintain, especially in big projects. This combination solves the problem of writing repetitive class names and keeps styles structured. It makes it easier to find and update styles, saving time and reducing bugs. Imagine trying to fix a tangled web of styles without clear names or grouping — it would be frustrating and slow.

Where it fits

Before learning this, you should know basic CSS selectors, how Sass nesting works, and the BEM naming convention. After mastering this, you can explore advanced Sass features like mixins and functions, or frameworks that use BEM with Sass for scalable CSS architecture.

Mental Model

Core Idea

Using & in Sass lets you build BEM class names by nesting selectors, so you write less code and keep styles logically grouped.

Think of it like...

It's like labeling folders and subfolders on your computer: the main folder is the block, subfolders are elements, and special versions are modifiers. Using & is like saying 'inside this folder' without repeating the full path every time.

Block (e.g., .button)
├─ Element (e.g., &__icon)
└─ Modifier (e.g., &--large)

Sass nesting:
.button {
  &__icon { ... }
  &--large { ... }
}

Build-Up - 7 Steps

1

Foundation

Understanding BEM Naming Basics

Concept: Learn what BEM naming means and why it uses blocks, elements, and modifiers.

BEM stands for Block Element Modifier. A block is a standalone component like .menu. An element is a part of the block, like .menu__item. A modifier changes appearance or behavior, like .menu--active. This naming keeps CSS clear and predictable.

Result

You can identify parts of a component by their class names and understand their roles.

Knowing BEM's structure helps you organize CSS so styles don't clash and are easy to maintain.

2

Foundation

Basics of Sass Nesting and & Symbol

Concept: Learn how Sass nesting works and what the & symbol means inside nested selectors.

Sass lets you write CSS inside other CSS blocks, called nesting. The & symbol means 'the current selector'. For example: .button { &--active { color: red; } } means .button--active in CSS.

Result

You can write nested styles that compile to normal CSS with less repetition.

Understanding & is key to writing DRY (Don't Repeat Yourself) CSS with Sass.

3

Intermediate

Combining & with BEM Elements

🤔Before reading on: do you think &__element inside .block creates .block__element or something else? Commit to your answer.

Concept: Use & to create BEM element selectors by appending __element to the current block selector.

Inside a block selector, write &__element to create the element class. For example: .button { &__icon { color: blue; } } compiles to .button__icon { color: blue; }

Result

You write nested styles that generate correct BEM element class names without repeating the block name.

Using & with __element saves typing and keeps related styles visually grouped.

4

Intermediate

Combining & with BEM Modifiers

🤔Before reading on: does &--modifier inside .block create .block--modifier or a nested selector? Commit to your answer.

Concept: Use & to create BEM modifier selectors by appending --modifier to the current block or element selector.

Inside a block or element selector, write &--modifier to create the modifier class. For example: .button { &--large { font-size: 2rem; } &__icon { &--small { width: 10px; } } } compiles to .button--large and .button__icon--small.

Result

You can write modifiers nested inside blocks or elements, keeping styles organized.

Modifiers can be nested logically, showing their relationship to blocks or elements.

5

Intermediate

Nesting Elements and Modifiers Together

🤔Before reading on: can you nest &__element and &--modifier inside the same block? Predict the output classes.

Concept: Combine element and modifier selectors inside the block by nesting &__element and &--modifier with &--modifier inside elements.

Example: .button { &__text { color: black; } &__text--highlight { color: red; } &--disabled { opacity: 0.5; } } This creates .button__text, .button__text--highlight, and .button--disabled classes.

Result

You get a clear hierarchy of styles for blocks, elements, and their modifiers.

Nesting both elements and modifiers together reflects the component structure in CSS.

6

Advanced

Avoiding Common Nesting Pitfalls with & and BEM

🤔Before reading on: do you think writing &__element--modifier inside &__element creates .block__element--modifier or something else? Commit to your answer.

Concept: Understand how & resolves inside nested selectors to avoid incorrect class names or selector duplication.

When nesting modifiers on elements, use &--modifier inside &__element to get .block__element--modifier. But if you write &__element--modifier inside .block, it creates .block__element--modifier directly. Misplacing & can cause wrong selectors or duplication.

Result

You write precise selectors that match your intended BEM structure without errors.

Knowing how & resolves in nested contexts prevents subtle bugs in CSS output.

7

Expert

Advanced Sass Techniques with & and BEM

🤔Before reading on: can you use & with interpolation to create dynamic BEM class names? Predict how it works.

Concept: Use Sass interpolation with & to build dynamic BEM class names and combine with variables or loops for scalable CSS.

Example: $modifiers: (large, disabled); .button { @each $mod in $modifiers { &--#{$mod} { /* styles */ } } } This generates .button--large and .button--disabled automatically. You can also do: &__#{$element} { /* styles */ } for dynamic elements.

Result

You create flexible, reusable CSS patterns that adapt to many cases with less code.

Combining & with interpolation unlocks powerful Sass features for scalable BEM styling.

Under the Hood

The & symbol in Sass represents the current selector at compile time. When Sass processes nested rules, it replaces & with the full parent selector path. This allows building complex selectors by appending strings like __element or --modifier directly to the parent selector. The Sass compiler then outputs flat CSS with fully qualified class names following BEM conventions.

Why designed this way?

Sass was designed to reduce repetition and improve CSS maintainability. The & symbol lets developers write nested selectors without repeating long class names. BEM naming was created to make CSS classes meaningful and avoid conflicts. Combining & with BEM in Sass leverages both ideas: nesting for clarity and BEM for structure. Alternatives like writing full class names repeatedly were error-prone and verbose.

.block {
  &__element {
    &--modifier { }
  }
}

Compiles to:
.block__element--modifier { }

Flow:
[.block] --append '__element'--> [.block__element] --append '--modifier'--> [.block__element--modifier]

Myth Busters - 4 Common Misconceptions

Quick: Does & always refer to the immediate parent selector or can it refer to higher ancestors? Commit to your answer.

Common Belief: Many think & always refers only to the direct parent selector in nesting.

Reality: The & refers to the full current selector path at that nesting level, which can include multiple parent selectors if nested deeply.

Why it matters: Misunderstanding this causes incorrect selector generation, leading to unexpected CSS rules or missing styles.

Quick: Can you write &__element--modifier directly inside the block selector to create .block__element--modifier? Commit to yes or no.

Common Belief: Some believe you must always nest &--modifier inside &__element to create element modifiers.

Reality: You can write &__element--modifier directly inside the block selector to create .block__element--modifier without extra nesting.

Why it matters: Knowing this allows simpler code and avoids unnecessary nesting, improving readability.

Quick: Does nesting &--modifier inside &__element always create a modifier for the element? Commit to your answer.

Common Belief: People often think nesting &--modifier inside &__element always creates a modifier for that element.

Reality: It does, but only if & is used correctly; misplaced nesting or missing & can create invalid selectors or unexpected results.

Why it matters: This misconception leads to CSS bugs where modifiers don't apply as intended.

Quick: Is using & with interpolation only useful for simple class names? Commit to yes or no.

Common Belief: Some think & with interpolation is complicated and rarely useful.

Reality: Using & with interpolation is powerful for generating dynamic BEM class names and scaling CSS efficiently.

Why it matters: Ignoring this limits your ability to write flexible, maintainable styles in large projects.

Expert Zone

1

When nesting deeply, & represents the full selector chain, so combining multiple & in one selector can produce unexpected results if not carefully planned.

2

Using & with interpolation allows creating loops and maps for modifiers and elements, enabling DRY and scalable CSS architectures.

3

Modifiers can be applied not only to blocks but also to elements, and nesting order affects specificity and cascade, which experts leverage for fine control.

When NOT to use

Avoid using & with BEM in very simple projects where flat CSS is sufficient, or when using CSS-in-JS solutions that handle scoping differently. Also, if your team prefers atomic CSS or utility-first frameworks like Tailwind, this approach may add unnecessary complexity.

Production Patterns

In production, developers use & with BEM to create modular, reusable components with clear style boundaries. They combine it with Sass variables, mixins, and loops to generate consistent themes and responsive modifiers. This pattern supports large-scale projects with many contributors by enforcing naming discipline and reducing CSS conflicts.

Connections

CSS Specificity

Combining & with BEM affects selector specificity by building compound class names.

Understanding how & builds selectors helps predict CSS specificity and avoid style conflicts.

Modular Programming

BEM with & promotes modular CSS, similar to how modular programming breaks code into reusable parts.

Seeing CSS as modular components improves maintainability and scalability, just like modular code.

File System Hierarchy

The nested structure of & with BEM mirrors folder and subfolder organization in file systems.

Recognizing this parallel helps grasp why nesting and naming conventions keep projects tidy and navigable.

Common Pitfalls

#1 Writing &__element--modifier inside &__element without & prefix causes invalid selector.

Wrong approach:

.button {
&__icon {
__icon--small { width: 10px; }
}
}

Correct approach:

.button {
&__icon {
&--small { width: 10px; }
}
}

Root cause:

Forgetting to use & means Sass treats __icon--small as a new selector, not related to the parent.

#2 Nesting &--modifier outside block or element causes wrong selector generation.

Wrong approach:

.button {
&__icon { color: blue; }
}
&--large { font-size: 2rem; }

Correct approach:

.button {
&--large { font-size: 2rem; }
}

Root cause:

Using & outside a selector block has no context, so Sass cannot resolve it properly.

#3 Repeating full BEM class names inside nesting defeats the purpose of &.

Wrong approach:

.button {
.button__icon { color: blue; }
}

Correct approach:

.button {
&__icon { color: blue; }
}

Root cause:

Not using & causes verbose and error-prone code, losing nesting benefits.

Key Takeaways

Combining & with BEM in Sass lets you write nested, clear, and maintainable CSS by building class names dynamically.

The & symbol represents the current selector and helps avoid repeating long BEM class names inside nested blocks.

Understanding how & resolves in different nesting levels prevents common bugs and incorrect CSS output.

Using Sass interpolation with & unlocks powerful patterns for scalable and flexible BEM styling.

Mastering this combination improves your CSS organization, making large projects easier to manage and update.