BEM naming with SASS nesting - Deep Dive

Overview - BEM naming with SASS nesting

What is it?

BEM is a way to name CSS classes so they are clear and easy to understand. It stands for Block, Element, Modifier. SASS nesting lets you write CSS rules inside each other to show relationships. Combining BEM with SASS nesting helps organize styles in a neat, readable way. This makes your CSS easier to write and maintain.

Why it matters

Without a clear naming system like BEM, CSS can become messy and confusing, especially in big projects. Styles might accidentally affect the wrong parts of a page, causing bugs. SASS nesting without a naming convention can also create unclear code. Using BEM with SASS nesting solves these problems by making styles predictable and easy to find, saving time and frustration.

Where it fits

Before learning this, you should know basic CSS and how to write simple SASS. After this, you can learn advanced CSS architecture, responsive design, and CSS-in-JS tools. This topic is a bridge from writing simple styles to managing large, complex style codebases.

Mental Model

Core Idea

BEM names parts of a UI clearly, and SASS nesting groups related styles together, making CSS easy to read and maintain.

Think of it like...

Think of BEM as labeling parts of a car clearly: the car (Block), its doors (Elements), and different door colors or styles (Modifiers). SASS nesting is like putting all the instructions for the car’s doors inside the car’s manual section, so everything related is together.

Block (button)
│
├─ Element (__icon)
│   └─ Modifier (--small)
└─ Modifier (--primary)

SASS nesting groups:
.button {
  // Block styles
  &__icon {
    // Element styles
    &--small {
      // Modifier styles
    }
  }
  &--primary {
    // Modifier styles
  }
}

Build-Up - 7 Steps

1

Foundation

Understanding BEM basics

Concept: Learn what Block, Element, and Modifier mean in BEM naming.

BEM breaks UI into blocks (independent components), elements (parts inside blocks), and modifiers (variations). For example, a button is a block: .button. An icon inside it is an element: .button__icon. A small version is a modifier: .button--small.

Result

You can name CSS classes clearly to show their role and relationship.

Understanding BEM basics helps you write CSS that is easy to understand and avoids conflicts.

2

Foundation

Basics of SASS nesting

Concept: Learn how to write CSS rules inside each other using SASS nesting.

SASS lets you write nested rules to show hierarchy. For example: .button { color: blue; &__icon { color: red; } } This means .button styles and inside it, .button__icon styles.

Result

Your CSS code is shorter and shows relationships clearly.

Knowing SASS nesting makes your styles easier to organize and read.

3

Intermediate

Combining BEM with SASS nesting

🤔Before reading on: do you think nesting BEM classes in SASS will create simpler or more complex CSS? Commit to your answer.

Concept: Use SASS nesting to write BEM class styles grouped by block and elements.

Instead of writing separate CSS rules, nest elements and modifiers inside the block: .button { background: blue; &__icon { color: white; } &--large { font-size: 2rem; } } This keeps related styles together.

Result

Your CSS is easier to maintain and matches the BEM naming structure visually.

Understanding this combination reduces errors and speeds up writing styles by grouping related rules.

4

Intermediate

Handling modifiers with SASS nesting

🤔Before reading on: do you think modifiers should be nested inside elements or blocks? Commit to your answer.

Concept: Modifiers can apply to blocks or elements and are nested accordingly in SASS.

Modifiers change appearance or behavior. Nest them inside the block or element they modify: .button { &--primary { background: green; } &__icon { &--small { width: 10px; } } } This keeps modifiers close to what they change.

Result

Modifiers are clearly linked to their blocks or elements in code.

Knowing where to nest modifiers prevents confusion and keeps styles predictable.

5

Intermediate

Avoiding deep nesting pitfalls

🤔Before reading on: is deeper nesting always better for clarity? Commit to your answer.

Concept: Too much nesting can make CSS hard to read and slow to compile.

Keep nesting shallow, usually 2-3 levels max. For example, avoid nesting inside modifiers too deeply: .button { &__icon { &--small { // styles } } } But don't nest further inside that. Deep nesting creates complex selectors.

Result

Your CSS stays fast and easy to understand.

Understanding nesting limits helps maintain performance and readability.

6

Advanced

Using SASS placeholders with BEM

🤔Before reading on: do you think placeholders can help reduce repetition in BEM styles? Commit to your answer.

Concept: SASS placeholders let you write reusable style blocks for BEM parts.

Define placeholders for common styles: %button-base { padding: 1rem; border-radius: 4px; } .button { @extend %button-base; &--primary { background: blue; } } This avoids repeating styles across modifiers.

Result

Your CSS is DRY (Don't Repeat Yourself) and easier to update.

Knowing placeholders improves code reuse and keeps BEM styles consistent.

7

Expert

Managing large projects with BEM and SASS

🤔Before reading on: do you think BEM with SASS nesting scales well for very large projects? Commit to your answer.

Concept: In big projects, combining BEM and SASS nesting helps organize styles but requires discipline and tooling.

Use partial files for blocks, import them in a main file. Keep nesting shallow. Use naming conventions strictly. Tools like stylelint can enforce BEM rules. This approach prevents style conflicts and makes teamwork easier.

Result

Large CSS codebases stay maintainable and scalable.

Understanding project structure and tooling is key to applying BEM and SASS nesting successfully at scale.

Under the Hood

SASS nesting compiles into flat CSS selectors by combining parent selectors with nested ones. BEM naming uses specific class name patterns that describe UI structure. When nested, SASS combines selectors like .block with &__element or &--modifier to produce .block__element or .block--modifier. This keeps CSS selectors clear and specific, avoiding conflicts and improving browser rendering performance.

Why designed this way?

BEM was created to solve CSS conflicts and unclear naming in large projects by enforcing a strict naming pattern. SASS nesting was designed to make writing CSS more natural and organized by showing relationships visually in code. Combining them leverages both clarity in naming and code structure, making styles easier to write, read, and maintain.

SASS nesting and BEM selector generation:

.button {
  &__icon {
    &--small {
      color: red;
    }
  }
}

Compiles to:
.button__icon--small {
  color: red;
}

Flow:
[.button] ── nests ──> [.button__icon] ── nests ──> [.button__icon--small]

Myth Busters - 4 Common Misconceptions

Quick: Does nesting in SASS automatically mean better organized CSS? Commit yes or no.

Common Belief: More nesting in SASS always makes CSS easier to manage.

Reality: Too much nesting creates complex selectors that are hard to read and slow to compile.

Why it matters: Excessive nesting can cause performance issues and make debugging styles difficult.

Quick: Is BEM only about naming classes, not about CSS structure? Commit yes or no.

Common Belief: BEM is just a naming convention and does not affect how CSS is written.

Reality: BEM influences CSS structure by encouraging modular, reusable components and clear relationships.

Why it matters: Ignoring BEM’s structural guidance can lead to messy, unmaintainable CSS.

Quick: Can modifiers be nested anywhere in SASS without affecting CSS output? Commit yes or no.

Common Belief: Modifiers can be nested anywhere inside blocks or elements without changing meaning.

Reality: Modifiers must be nested correctly to produce the right CSS selectors matching BEM rules.

Why it matters: Incorrect nesting breaks the naming pattern, causing styles not to apply as expected.

Quick: Does using SASS placeholders always reduce CSS file size? Commit yes or no.

Common Belief: SASS placeholders always make CSS smaller by reusing styles.

Reality: Placeholders reduce repetition in source code but can increase CSS size if overused with many extends.

Why it matters: Misusing placeholders can lead to bloated CSS, hurting page load times.

Expert Zone

1

BEM naming can be adapted with namespaces or prefixes to avoid conflicts in very large projects or when integrating third-party components.

2

SASS nesting should be balanced with flat selectors to optimize browser rendering and avoid overly specific CSS that is hard to override.

3

Using tools like stylelint with BEM plugins enforces naming rules and prevents common mistakes automatically in team environments.

When NOT to use

Avoid deep SASS nesting with BEM in small projects where simple CSS is sufficient. Also, if using CSS-in-JS or utility-first frameworks like Tailwind, BEM with SASS nesting may add unnecessary complexity.

Production Patterns

In production, teams split styles into partials by block, use strict BEM naming enforced by linters, and combine SASS nesting with placeholders and mixins for reusable patterns. This approach supports scalable, maintainable CSS in large applications.

Connections

Component-based UI frameworks

BEM naming and SASS nesting both support modular, reusable UI components similar to frameworks like React or Vue.

Understanding BEM and nesting helps grasp how component styles are scoped and organized in modern UI frameworks.

Software engineering modularity

BEM enforces modularity in CSS similar to how modular programming breaks code into reusable parts.

Knowing modularity principles in software helps appreciate why BEM improves CSS maintainability.

Linguistics syntax trees

SASS nesting resembles syntax trees in linguistics where nested structures show relationships between words.

Recognizing nested structures in language helps understand how nested CSS selectors represent relationships in UI.

Common Pitfalls

#1 Nesting elements too deeply causing complex selectors

Wrong approach:

.button {
&__icon {
&__svg {
color: red;
}
}
}

Correct approach:

.button {
&__icon {
color: red;
}
}
.button__svg {
color: red;
}

Root cause:

Misunderstanding that BEM elements do not nest inside each other; each element is a direct child of the block.

#2 Placing modifiers outside the block or element nesting

Wrong approach:

.button {
&__icon {
color: blue;
}
}
.button--primary {
background: green;
}

Correct approach:

.button {
&--primary {
background: green;
}
&__icon {
color: blue;
}
}

Root cause:

Not nesting modifiers inside their related block causes scattered styles and harder maintenance.

#3 Overusing SASS extends causing large CSS output

Wrong approach:

%btn-base {
padding: 1rem;
}
.button {
@extend %btn-base;
}
.link {
@extend %btn-base;
}
.card {
@extend %btn-base;
}

Correct approach:

%btn-base {
padding: 1rem;
}
.button, .link, .card {
@extend %btn-base;
}

Root cause:

Extending placeholders separately for many selectors duplicates styles instead of grouping them.

Key Takeaways

BEM naming clearly defines UI parts as blocks, elements, and modifiers to keep CSS organized and predictable.

SASS nesting groups related styles visually, making CSS easier to write and understand when combined with BEM.

Keep nesting shallow and modifiers correctly placed to avoid complex selectors and maintain performance.

Use SASS features like placeholders carefully to reduce repetition without bloating CSS output.

In large projects, combining BEM with SASS nesting and tooling supports scalable, maintainable style codebases.