BEM naming with SASS nesting - Performance & Optimization

Performance: BEM naming with SASS nesting

MEDIUM IMPACT

This affects CSS parsing and rendering speed by influencing selector complexity and style recalculation.

Writing maintainable CSS with BEM and nesting in SASS

SASS

.block {
  &__element--modifier {
    color: red;
  }
}

// Flattened nesting with combined BEM class

Reduces selector complexity by combining element and modifier in one class, simplifying matching.

📈 Performance GainSingle style recalculation, faster selector matching

Writing maintainable CSS with BEM and nesting in SASS

SASS

.block {
  &__element {
    &--modifier {
      color: red;
    }
  }
}

// Deep nesting with many levels

Deep nesting creates very specific and long selectors that slow down browser style matching.

📉 Performance CostTriggers multiple style recalculations and increases CSS selector matching time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Deep nested BEM selectors	No extra DOM nodes	Multiple reflows if styles change	Higher paint cost due to complex styles	[X] Bad
Flat BEM combined classes	No extra DOM nodes	Single reflow on style change	Lower paint cost with simpler styles	[OK] Good

Rendering Pipeline

CSS selectors from BEM with deep nesting increase complexity during Style Calculation, causing longer Layout and Paint times.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex selectors

Core Web Vital Affected

LCP

This affects CSS parsing and rendering speed by influencing selector complexity and style recalculation.

Optimization Tips

1Avoid deep nesting in SASS to keep CSS selectors simple.

2Combine BEM element and modifier classes to reduce selector length.

3Simpler selectors speed up style calculation and improve LCP.

Performance Quiz - 3 Questions

How does deep nesting in SASS with BEM naming affect browser performance?

A Reduces CSS file size significantly

B Increases CSS selector complexity, slowing style calculation

C Improves browser caching automatically

D Has no impact on rendering speed

DevTools: Performance

How to check: Record a performance profile while loading the page or interacting with styled elements. Look for long Style Calculation times.

What to look for: High time spent in 'Recalculate Style' and 'Layout' tasks indicates complex CSS selectors slowing rendering.

Practice

1. What does the __ double underscore represent in BEM naming?

easy

A. It separates a block from its element

B. It separates a modifier from a block

C. It is used to join two blocks

D. It indicates a CSS property

Solution

1. Step 1: Understand BEM structure

   BEM uses blocks, elements, and modifiers. Elements are parts of blocks.

2. Step 2: Identify the role of double underscore

   The double underscore __ connects a block to its element, e.g., block__element.

3. Final Answer:

   It separates a block from its element -> Option A

4. Quick Check:

   BEM element separator = __ [OK]

Hint: Double underscore links block and element in BEM [OK]

Common Mistakes:

• Confusing __ with modifier separator --
• Thinking __ joins two blocks
• Using __ as a CSS property

2. Which of the following is the correct SASS nesting syntax for a BEM modifier block--active inside .block?

easy

A. &__active { color: red; }

B. .block--active { color: red; }

C. &--active { color: red; }

D. --active { color: red; }

Solution

1. Step 1: Understand SASS nesting with &

   The ampersand & represents the parent selector inside nesting.

2. Step 2: Apply modifier syntax

   For modifier block--active, use &--active inside .block nesting.

3. Final Answer:

   &--active { color: red; } -> Option C

4. Quick Check:

   SASS & + --modifier = &--modifier [OK]

Hint: Use & before --modifier inside block nesting [OK]

Common Mistakes:

• Writing full class name inside nesting
• Using __ instead of -- for modifiers
• Omitting & causing invalid selector

3. Given this SASS code, what CSS selector will be generated for the nested element?

.card {
  &__title {
    font-weight: bold;
  }
}

medium

A. .card__title { font-weight: bold; }

B. .card &__title { font-weight: bold; }

C. .card__title { font-weight: normal; }

D. .card-title { font-weight: bold; }

Solution

1. Step 1: Understand & usage in SASS

   The & represents the parent selector .card.

2. Step 2: Combine & with __title

   Combining .card and __title forms .card__title.

3. Final Answer:

   .card__title { font-weight: bold; } -> Option A

4. Quick Check:

   SASS & + __element = block__element [OK]

Hint: & plus __element creates block__element selector [OK]

Common Mistakes:

• Thinking & is literal text in output
• Confusing __title with -title
• Ignoring font-weight value changes

4. Identify the error in this SASS code using BEM nesting:

.menu {
  &__item {
    color: blue;
  }
  &--active {
    color: red;
  }
  &__item--active {
    font-weight: bold;
  }
  &-extra {
    padding: 10px;
  }
}

medium

A. Using &--active inside block is invalid

B. Missing nesting for &__item--active

C. No errors, code is correct

D. Incorrect use of &-extra for a modifier

Solution

1. Step 1: Check each nested selector

   &__item, &--active, and &__item--active follow BEM rules correctly.

2. Step 2: Analyze &-extra

   &-extra is invalid because BEM modifiers use double hyphen --, not single hyphen.

3. Final Answer:

   Incorrect use of &-extra for a modifier -> Option D

4. Quick Check:

   BEM modifiers need --, not - [OK]

Hint: Modifiers use --, not single - after & [OK]

Common Mistakes:

• Using single hyphen for modifiers
• Thinking &--active is invalid
• Missing nesting for combined element-modifier

5. You want to style a BEM block .form with an element __input and a modifier --error on the element. Which SASS nesting code correctly applies red border only when the input has the error modifier?

hard

A. .form {
&--error {
&__input {
border-color: red;
}
}
}

B. .form {
&__input {
border: 1px solid black;
&--error {
border-color: red;
}
}
}

C. .form {
&__input-error {
border-color: red;
}
}

D. .form-input {
&--error {
border-color: red;
}
}

Solution

1. Step 1: Nest element inside block

   The element __input is nested inside .form using &__input.

2. Step 2: Nest modifier inside element

   The modifier --error applies to the element, so inside &__input nest &--error.

3. Step 3: Confirm correct CSS output

   This produces .form__input--error selector with red border, applying only when input has error modifier.

4. Final Answer:

   Correct nesting with &__input then &--error inside -> Option B

5. Quick Check:

   Modifier nested inside element = &__element { &--modifier } [OK]

Hint: Nest modifier inside element nesting for element modifiers [OK]

Common Mistakes:

• Placing modifier outside element nesting
• Using block--modifier for element modifier
• Not nesting modifier with & inside element