Combining & with BEM naming in SASS - Browser Rendering Trace

Render Flow - Combining & with BEM naming

Read .block selector

↓

Create .block CSS rule

↓

Encounter & inside nested rule

↓

Replace & with parent selector .block

↓

Append BEM modifier or element

↓

Generate combined selector like .block__element or .block--modifier

↓

Apply styles to combined selector

↓

Render styles in browser

The Sass compiler reads the parent selector .block, then replaces & with that parent selector inside nested rules to create combined BEM selectors like .block__element or .block--modifier, which the browser then applies to style the correct elements.

Render Steps - 3 Steps

Code Added:.block { color: black; }

Before

[ ] (empty page)

→

After

[block]
  Text color: black

The .block element appears with black text on the page.

🔧 Browser Action:Creates CSS rule for .block and paints text in black

Code Sample

This code styles a block with black text, its element with blue text, and its modifier with red text using combined & with BEM naming.

SASS

<div class="block">
  <div class="block__element">Element</div>
  <div class="block--modifier">Modifier</div>
</div>

SASS

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

Render Quiz - 3 Questions

After applying step 2, what color is the text inside the element with class .block__element?

A Black

B Red

C Blue

D Default browser color

Common Confusions - 2 Topics

Why does using & inside nested Sass selectors create combined class names?

Because & stands for the parent selector, so when you write &__element inside .block, it becomes .block__element, combining the block and element names as per BEM rules (see render_steps 2).

💡 Think of & as 'the full parent selector' that you can add to, not just a placeholder.

What happens if I forget to use & when writing BEM modifiers in Sass?

Without &, the modifier selector is treated as a separate class, not combined with the block. So styles won't apply to .block--modifier but only to --modifier alone, which likely doesn't exist (see render_steps 3).

💡 Always start nested BEM selectors with & to combine properly.

Property Reference

Property	Value Applied	Effect on Selector	Visual Effect	Common Use
&	Used inside nested selector	Replaced by parent selector	Creates combined selectors like .block__element	BEM naming for elements and modifiers
__element	Appended after &	Forms .block__element	Styles block's element specifically	Styling child elements in BEM
--modifier	Appended after &	Forms .block--modifier	Styles block's modifier variant	Styling variations or states

Concept Snapshot

In Sass, & means 'parent selector'. Use & with BEM to combine block and element or modifier names. Example: &__element becomes .block__element. This keeps CSS organized and clear. Always start nested BEM selectors with &. Visual: block text black, element blue, modifier red.