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.

Practice

1. What does the __ double underscore represent in BEM naming?

easy

A. It separates a block from its element

B. It separates a modifier from a block

C. It is used to join two blocks

D. It indicates a CSS property

Solution

1. Step 1: Understand BEM structure

   BEM uses blocks, elements, and modifiers. Elements are parts of blocks.

2. Step 2: Identify the role of double underscore

   The double underscore __ connects a block to its element, e.g., block__element.

3. Final Answer:

   It separates a block from its element -> Option A

4. Quick Check:

   BEM element separator = __ [OK]

Hint: Double underscore links block and element in BEM [OK]

Common Mistakes:

• Confusing __ with modifier separator --
• Thinking __ joins two blocks
• Using __ as a CSS property

2. Which of the following is the correct SASS nesting syntax for a BEM modifier block--active inside .block?

easy

A. &__active { color: red; }

B. .block--active { color: red; }

C. &--active { color: red; }

D. --active { color: red; }

Solution

1. Step 1: Understand SASS nesting with &

   The ampersand & represents the parent selector inside nesting.

2. Step 2: Apply modifier syntax

   For modifier block--active, use &--active inside .block nesting.

3. Final Answer:

   &--active { color: red; } -> Option C

4. Quick Check:

   SASS & + --modifier = &--modifier [OK]

Hint: Use & before --modifier inside block nesting [OK]

Common Mistakes:

• Writing full class name inside nesting
• Using __ instead of -- for modifiers
• Omitting & causing invalid selector

3. Given this SASS code, what CSS selector will be generated for the nested element?

.card {
  &__title {
    font-weight: bold;
  }
}

medium

A. .card__title { font-weight: bold; }

B. .card &__title { font-weight: bold; }

C. .card__title { font-weight: normal; }

D. .card-title { font-weight: bold; }

Solution

1. Step 1: Understand & usage in SASS

   The & represents the parent selector .card.

2. Step 2: Combine & with __title

   Combining .card and __title forms .card__title.

3. Final Answer:

   .card__title { font-weight: bold; } -> Option A

4. Quick Check:

   SASS & + __element = block__element [OK]

Hint: & plus __element creates block__element selector [OK]

Common Mistakes:

• Thinking & is literal text in output
• Confusing __title with -title
• Ignoring font-weight value changes

4. Identify the error in this SASS code using BEM nesting:

.menu {
  &__item {
    color: blue;
  }
  &--active {
    color: red;
  }
  &__item--active {
    font-weight: bold;
  }
  &-extra {
    padding: 10px;
  }
}

medium

A. Using &--active inside block is invalid

B. Missing nesting for &__item--active

C. No errors, code is correct

D. Incorrect use of &-extra for a modifier

Solution

1. Step 1: Check each nested selector

   &__item, &--active, and &__item--active follow BEM rules correctly.

2. Step 2: Analyze &-extra

   &-extra is invalid because BEM modifiers use double hyphen --, not single hyphen.

3. Final Answer:

   Incorrect use of &-extra for a modifier -> Option D

4. Quick Check:

   BEM modifiers need --, not - [OK]

Hint: Modifiers use --, not single - after & [OK]

Common Mistakes:

• Using single hyphen for modifiers
• Thinking &--active is invalid
• Missing nesting for combined element-modifier

5. You want to style a BEM block .form with an element __input and a modifier --error on the element. Which SASS nesting code correctly applies red border only when the input has the error modifier?

hard

A. .form {
&--error {
&__input {
border-color: red;
}
}
}

B. .form {
&__input {
border: 1px solid black;
&--error {
border-color: red;
}
}
}

C. .form {
&__input-error {
border-color: red;
}
}

D. .form-input {
&--error {
border-color: red;
}
}

Solution

1. Step 1: Nest element inside block

   The element __input is nested inside .form using &__input.

2. Step 2: Nest modifier inside element

   The modifier --error applies to the element, so inside &__input nest &--error.

3. Step 3: Confirm correct CSS output

   This produces .form__input--error selector with red border, applying only when input has error modifier.

4. Final Answer:

   Correct nesting with &__input then &--error inside -> Option B

5. Quick Check:

   Modifier nested inside element = &__element { &--modifier } [OK]

Hint: Nest modifier inside element nesting for element modifiers [OK]

Common Mistakes:

• Placing modifier outside element nesting
• Using block--modifier for element modifier
• Not nesting modifier with & inside element