BEM naming with SASS nesting - Browser Rendering Trace

Render Flow - BEM naming with SASS nesting

Write SASS code with BEM nesting

↓

SASS compiler expands nested selectors

↓

Generates CSS with full BEM class names

↓

Browser reads CSS selectors

↓

Applies styles to matching HTML elements

↓

Renders styled elements visually

The SASS compiler reads nested BEM-style selectors and expands them into full CSS class selectors. The browser then applies these styles to the HTML elements with matching classes, producing the final styled layout.

Render Steps - 3 Steps

Code Added:.block { background-color: #e0f7fa; padding: 1rem; }

Before

[ ] (empty page)

→

After

[block__________]
[background____]
[light_blue____]

The block div appears with a light blue background and padding, creating a visible container.

🔧 Browser Action:Creates box for .block, applies background and padding, triggers reflow

Code Sample

A block with an element inside it, and a modifier style applied to a button inside the element, each with distinct background colors and spacing.

SASS

<div class="block">
  <div class="block__element">
    <button class="block__element--modifier">Click me</button>
  </div>
</div>

SASS

.block {
  background-color: #e0f7fa;
  padding: 1rem;
}
.block__element {
  background-color: #80deea;
  padding: 0.5rem;
}
.block__element--modifier {
  background-color: #26c6da;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

Render Quiz - 3 Questions

After step 2, what background color does the element inside the block have?

A Light blue (#e0f7fa)

B Medium blue (#80deea)

C Dark blue (#26c6da)

D No background color

Common Confusions - 3 Topics

Why does nesting with &__element create the full BEM class?

The & symbol in SASS means 'use the parent selector here'. So &__element becomes .block__element when nested inside .block. This expands the BEM naming correctly.

💡 Remember & repeats the full parent selector exactly where placed.

Why doesn't .block__element styles apply if I forget nesting &?

Without &, SASS treats __element as a new selector, not connected to .block. So styles won't match the HTML class .block__element, causing no visual change.

💡 Always use & to build BEM selectors inside nesting.

Why is the modifier style not applied if I write &--modifier outside element nesting?

Modifiers usually belong to elements or blocks. If &--modifier is outside the element nesting, it applies to the block, not the element. This changes which HTML class it matches visually.

💡 Place modifiers inside the correct nesting level to target the right class.

Property Reference

Selector	SASS Nesting Syntax	Generated CSS Selector	Visual Effect	Common Use
.block	&	.block	Base block container style	Main component wrapper
.block__element	&__element	.block__element	Element inside block with own style	Sub-part of block
.block__element--modifier	&__element--modifier	.block__element--modifier	Modified element style variant	State or variation of element

Concept Snapshot

BEM uses blocks, elements, and modifiers for clear class names. SASS nesting with & builds full BEM selectors. & repeats the parent selector exactly. Use &__element and &--modifier inside nesting. This keeps CSS organized and readable. Visual styles apply correctly to matching HTML classes.