Combining & with BEM naming in SASS - Performance & Optimization

Performance: Combining & with BEM naming

MEDIUM IMPACT

This affects CSS selector matching speed and rendering performance by how selectors are combined and scoped.

Writing CSS selectors for BEM blocks and elements efficiently

SASS

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

Using & nests selectors under .block, reducing repetition and keeping selectors scoped and shorter.

📈 Performance GainSaves CSS size and reduces selector matching complexity, improving rendering speed

Writing CSS selectors for BEM blocks and elements efficiently

SASS

.block__element { color: red; } .block__element--modifier { color: blue; }

Repeating full BEM selectors increases CSS size and selector complexity, slowing down matching.

📉 Performance CostAdds extra CSS bytes and increases selector matching time linearly with repeated selectors

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated full BEM selectors	No extra DOM nodes	0	Low but slower style matching	[X] Bad
Nested & with BEM selectors	No extra DOM nodes	0	Low and faster style matching	[OK] Good

Rendering Pipeline

The browser matches CSS selectors during Style Calculation. Complex or repeated selectors increase matching time, delaying Layout and Paint.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to complex or repeated selectors

Core Web Vital Affected

LCP

This affects CSS selector matching speed and rendering performance by how selectors are combined and scoped.

Optimization Tips

1Use & in Sass to nest BEM selectors and avoid repeating full selector names.

2Simpler, scoped selectors reduce CSS matching time and improve rendering speed.

3Avoid repeating long BEM selectors to keep CSS size small and style calculation fast.

Performance Quiz - 3 Questions

Why does using & to nest BEM selectors improve CSS performance?

A It increases DOM nodes for better style application

B It adds more CSS rules but speeds up JavaScript

C It reduces repeated selector text and simplifies matching

D It delays style calculation to after layout

DevTools: Performance

How to check: Record a performance profile while loading the page. Look at the Style Calculation phase duration.

What to look for: Longer Style Calculation times indicate complex or repeated selectors; shorter times show efficient nesting.