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.