BEM naming with SASS nesting - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a BEM block named button with a nested element __icon using SASS nesting.

SASS

.button {
  color: blue;
  &[1] {
    margin-left: 0.5rem;
  }
}

Drag options to blanks, or click blank then click option'

A__icon

B-icon

C_icon

D--icon

Attempts:

3 left

💡 Hint

Common Mistakes

Using single underscore or hyphen instead of double underscore for elements.

Not using the ampersand & for nesting.

In BEM, elements are connected to blocks with double underscores. Using &__icon nests the button__icon element inside the button block.

2fill in blank

medium

Complete the code to add a BEM modifier --active to the button block using SASS nesting.

SASS

.button {
  background: gray;
  &[1] {
    background: green;
  }
}

Drag options to blanks, or click blank then click option'

A--active

B_active

C-active

D__active

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores or single hyphens instead of double hyphens for modifiers.

Forgetting the ampersand & for nesting.

BEM modifiers use double hyphens. Using &--active nests the button--active modifier inside the button block.

3fill in blank

hard

Fix the error in the code to correctly nest the __title element inside the card block using SASS nesting.

SASS

.card {
  padding: 1rem;
  &[1] {
    font-weight: bold;
  }
}

Drag options to blanks, or click blank then click option'

A_title

B__title

C--title

D-title

Attempts:

3 left

💡 Hint

Common Mistakes

Using single underscore or hyphen instead of double underscore for elements.

Not using the ampersand &.

The correct BEM element syntax uses double underscores. Using &__title nests the card__title element properly.

4fill in blank

hard

Fill both blanks to create a BEM block nav with an element __item and a modifier --active on the element using SASS nesting.

SASS

.nav {
  &[1] {
    color: black;
    &[2] {
      color: red;
    }
  }
}

Drag options to blanks, or click blank then click option'

A__item

B--active

C-active

D__active

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing underscores and hyphens incorrectly.

Not nesting modifiers inside elements properly.

First, &__item nests the element nav__item. Then, &--active nests the modifier nav__item--active on that element.

5fill in blank

hard

Fill all three blanks to create a BEM block form with an element __input, a modifier --error on the element, and a nested element __label inside the block using SASS nesting.

SASS

.form {
  &[1] {
    border: 1px solid gray;
    &[2] {
      border-color: red;
    }
  }
  &[3] {
    font-weight: bold;
  }
}

Drag options to blanks, or click blank then click option'

A__input

B--error

C__label

D-error

Attempts:

3 left

💡 Hint

Common Mistakes

Using single underscores or hyphens incorrectly.

Not nesting modifiers inside elements properly.

Use &__input for the element, &--error for the modifier on that element, and &__label for another element inside the block.