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.