BEM naming with SASS nesting - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS code using BEM nesting?

Given the following SASS code, what CSS will it produce?

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

SASS

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

A

.block__element {
  color: red;
}

B

.block .__element {
  color: red;
}

C

.block__element {
  color: blue;
}

D

.block__element {
  color: red;
  font-weight: bold;
}

💡 Hint

Remember that & replaces the parent selector exactly in SASS nesting.

The & symbol in SASS replaces the parent selector. So &__element becomes .block__element in CSS.

❓ selector

intermediate

Which selector matches the BEM modifier in this SASS snippet?

Look at this SASS code:

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

Which CSS selector does it generate?

SASS

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

A

.block--active {
  background: green;
}

B

.block .--active {
  background: green;
}

C

.block--active {
  background: red;
}

D

.block--active.active {
  background: green;
}

💡 Hint

Modifiers in BEM use double dashes and are appended directly to the block name.

The & replaces the parent selector exactly, so &--active becomes .block--active in CSS.

❓ layout

advanced

How does this nested BEM SASS code affect layout?

Consider this SASS code:

.card {
  display: flex;
  &__header {
    flex: 1;
  }
  &__body {
    flex: 2;
  }
}

What will be the layout behavior of .card__header and .card__body inside .card?

SASS

.card {
  display: flex;
  &__header {
    flex: 1;
  }
  &__body {
    flex: 2;
  }
}

A .card__header takes twice the space of .card__body inside .card.

B .card__header and .card__body stack vertically inside .card.

C .card__header takes one part and .card__body takes two parts of the horizontal space inside .card.

D .card__header and .card__body have no flex behavior inside .card.

💡 Hint

Flex container distributes space according to flex values of children.

With display:flex on .card, children with flex:1 and flex:2 share horizontal space in ratio 1:2.

❓ accessibility

advanced

Which BEM SASS nesting approach improves accessibility for a button with icon?

You want to style a button with an icon inside using BEM and SASS nesting. Which code snippet best supports accessibility by semantic HTML and clear structure?

.button {
  &__icon {
    margin-right: 0.5rem;
  }
}

SASS

.button {
  &__icon {
    margin-right: 0.5rem;
  }
}

A Use <div role="button"> with <i class="button__icon"> for the icon and style with .button__icon.

B Use <button> with <img class="button__icon"> without alt attribute and style with .button__icon.

C Use <a href="#" class="button"> with <svg class="button__icon"> and no aria attributes.

D Use <button> with <span class="button__icon" aria-hidden="true"> for the icon and style with .button__icon.

💡 Hint

Semantic elements and hiding decorative icons from screen readers help accessibility.

Using

🧠 Conceptual

expert

What is the main advantage of using BEM naming with SASS nesting in large projects?

Why do developers prefer combining BEM naming conventions with SASS nesting for CSS in big projects?

A It reduces CSS file size by automatically removing unused styles during compilation.

B It creates clear, reusable, and maintainable CSS by organizing styles with predictable class names and nested structure.

C It allows JavaScript to directly manipulate nested SASS variables at runtime for dynamic styling.

D It forces all styles to be inline, improving page load speed and eliminating external CSS files.

💡 Hint

Think about how naming and nesting help developers understand and manage styles.

BEM naming gives predictable class names, and SASS nesting groups related styles, making CSS easier to maintain and reuse in large projects.

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