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.

Practice

1. What does the & symbol represent when used in Sass with BEM naming?

easy

A. It resets all styles inside the block.

B. It creates a new CSS class unrelated to the parent.

C. It imports external CSS files.

D. It refers to the current parent selector in the nested block.

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol in Sass means "use the current parent selector" inside nested rules.

2. Step 2: Connect with BEM naming

   When combined with BEM, &__element or &--modifier appends to the parent block's class name.

3. Final Answer:

   It refers to the current parent selector in the nested block. -> Option D

4. Quick Check:

   & = current parent selector [OK]

Hint: Remember & means "this block" in nested Sass [OK]

Common Mistakes:

• Thinking & creates a new unrelated class
• Confusing & with a CSS variable
• Using & to import files

2. Which of the following Sass snippets correctly uses & to create a BEM modifier for a block named .card?

easy

A. &__active { background: green; }

B. .card--active { background: green; }

C. &--active { background: green; }

D. &-active { background: green; }

Solution

1. Step 1: Identify BEM modifier syntax

   Modifiers use double dashes: --modifier, so &--active appends --active to the parent block.

2. Step 2: Check other options

   .card--active { background: green; } repeats the full class, not using &. &__active { background: green; } uses __ which is for elements, not modifiers. &-active { background: green; } uses a single dash, which is incorrect for BEM modifiers.

3. Final Answer:

   &--active { background: green; } -> Option C

4. Quick Check:

   Modifier = &--modifier [OK]

Hint: Use &--modifier for modifiers inside blocks [OK]

Common Mistakes:

• Using single dash instead of double dash for modifiers
• Confusing elements (__element) with modifiers (--modifier)
• Writing full class name instead of using &

3. Given the Sass code below, what CSS will it generate?

.button {
  color: blue;
  &__icon {
    margin-right: 0.5rem;
  }
  &--large {
    font-size: 2rem;
  }
}

medium

A. .button { color: blue; } &__icon { margin-right: 0.5rem; } &--large { font-size: 2rem; }

B. .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; }

C. .button { color: blue; } .icon { margin-right: 0.5rem; } .large { font-size: 2rem; }

D. .button { color: blue; } .button_icon { margin-right: 0.5rem; } .button_large { font-size: 2rem; }

Solution

1. Step 1: Understand & usage in nested selectors

   The & appends to the parent selector .button. So &__icon becomes .button__icon and &--large becomes .button--large.

2. Step 2: Write the generated CSS

   The CSS will have three selectors: .button, .button__icon, and .button--large with their respective styles.

3. Final Answer:

   .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; } -> Option B

4. Quick Check:

   & + BEM = combined class names [OK]

Hint: &__element and &--modifier append to block class [OK]

Common Mistakes:

• Using underscore instead of double underscore for elements
• Not combining & with parent selector
• Leaving & in final CSS

4. Identify the error in this Sass code using BEM naming:

.menu {
  &__item {
    color: black;
  }
  &-active {
    font-weight: bold;
  }
}

medium

A. The modifier should use double dashes: &--active instead of &-active.

B. The element selector &__item is invalid and should be &-item.

C. The parent selector .menu is missing a dot.

D. The color property cannot be inside &__item.

Solution

1. Step 1: Check BEM modifier syntax

   Modifiers in BEM use double dashes --, so &-active is incorrect; it should be &--active.

2. Step 2: Verify element syntax

   &__item is correct for elements, so no error there.

3. Final Answer:

   The modifier should use double dashes: &--active instead of &-active. -> Option A

4. Quick Check:

   Modifier syntax = &--modifier [OK]

Hint: Modifiers always use double dashes -- not single [OK]

Common Mistakes:

• Using single dash for modifiers
• Confusing element and modifier syntax
• Thinking &__item is invalid

5. You want to style a BEM block .profile with an element avatar and a modifier highlighted. Which Sass code correctly combines & with BEM naming to style both the element and modifier inside .profile?

hard

A. .profile {
&__avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

B. .profile {
&-avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

C. .profile {
&__avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

D. .profile {
&-avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

Solution

1. Step 1: Apply BEM element syntax

   Elements use double underscore __, so &__avatar correctly targets .profile__avatar.

2. Step 2: Apply BEM modifier syntax

   Modifiers use double dash --, so &--highlighted correctly targets .profile--highlighted.

3. Step 3: Check other options

   Options A, C, and D use single dash for either element or modifier, which is incorrect in BEM.

4. Final Answer:

   .profile { &__avatar { border-radius: 50%; } &--highlighted { background-color: yellow; } } -> Option A

5. Quick Check:

   Element = &__element, Modifier = &--modifier [OK]

Hint: Use &__element and &--modifier exactly for BEM [OK]

Common Mistakes:

• Using single dash for elements or modifiers
• Mixing element and modifier syntax
• Not nesting inside the block selector