Combining & with BEM naming in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What CSS selector does this Sass code produce?

Given the Sass code below, what is the final CSS selector generated for the .block__element--modifier style?

SASS

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

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

B .block .__element--modifier { color: red; }

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

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

💡 Hint

Remember that & replaces the parent selector exactly where it appears.

The & symbol in Sass replaces the parent selector. Here, &__element becomes .block__element, and then &--modifier becomes .block__element--modifier.

📝 Syntax

intermediate

Which option causes a syntax error in Sass when combining & with BEM naming?

Identify which Sass snippet below will cause a syntax error due to incorrect use of & with BEM naming.

A

.block {
  &--modifier
    color: green;
  }

B

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

C

.block {
  &__element {
    color: blue;
  }
}

D

.block {
  &__element--modifier {
    &--extra {
      color: yellow;
    }
  }
}

💡 Hint

Check for missing opening braces `{` after nested selectors.

Option A is missing the opening curly brace `{` after `&--modifier`, causing a Sass syntax error. Sass expects `{` immediately after a selector.

❓ selector

intermediate

Which Sass code produces a descendant selector instead of BEM concatenated class?

Choose the Sass code that compiles to a descendant selector `.block __element` instead of the proper BEM concatenated `.block__element`.

A

.block {
  & __element {
    color: yellow;
  }
}

B

.block {
  &--modifier {
    color: green;
  }
}

C

.block {
  &__element {
    color: blue;
  }
}

D

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

💡 Hint

A space after & inserts a descendant combinator (space), preventing concatenation for BEM class names.

Option A has a space between & and __element, so & is replaced by .block, resulting in `.block __element` (descendant selector) instead of `.block__element` (single BEM class).

❓ rendering

advanced

What color will the element with class block__element--modifier have?

Given the Sass code below, what color will the element with class block__element--modifier display in the browser?

SASS

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

A Blue

B No color applied

C Red

D Purple

💡 Hint

Look at the nested selectors and which color applies to the modifier class.

The .block__element sets color blue, but .block__element--modifier overrides it with color red, so the element with that class will be red.

❓ accessibility

expert

How to improve accessibility when using BEM modifiers with & in Sass?

You have a button styled with BEM naming and Sass using & for modifiers. Which practice improves accessibility the most?

A Use only BEM modifiers with & in Sass to change colors for visual states.

B Add ARIA roles and states to the button element in HTML, not just rely on CSS classes.

C Add tabindex="-1" to all modifier classes to prevent keyboard focus.

D Use !important in Sass modifiers to ensure styles override defaults.

💡 Hint

Think about what helps screen readers and keyboard users, not just visual styles.

Accessibility requires semantic HTML and ARIA attributes to communicate state and roles to assistive tech. CSS alone cannot provide this.