Combining & with BEM naming in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the modifier class using & in BEM style.

SASS

.button {
  color: blue;
  &[1] {
    color: red;
  }
}

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

A--active

B-active

C__active

D-modifier

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single dash instead of double dashes for modifiers.

Using __ which is for elements, not modifiers.

In BEM, modifiers are added with two dashes --. Using &--active nests the modifier class .button--active.

2fill in blank

medium

Complete the code to nest the element class inside the block using & with BEM naming.

SASS

.card {
  background: white;
  &[1] {
    padding: 1rem;
  }
}

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

A--header

B_header

C-header

D__header

Attempts:

3 left

💡 Hint

Common Mistakes

Using dashes instead of underscores for elements.

Using a single underscore which is not standard in BEM.

In BEM, elements are connected to blocks with two underscores __. Using &__header nests the element class .card__header.

3fill in blank

hard

Fix the error in nesting the modifier class with & in BEM style.

SASS

.menu {
  font-size: 1rem;
  &[1] {
    font-weight: bold;
  }
}

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

A-active

B__active

C--active

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single dash or no dash for modifiers.

Using element syntax __active for modifiers.

The correct BEM modifier syntax uses two dashes --. Using &--active nests the modifier class .menu--active.

4fill in blank

hard

Fill both blanks to nest an element and a modifier inside a block using & with BEM naming.

SASS

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

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

A__item

B--disabled

C__link

D--active

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing element and modifier syntax.

Using single dashes or underscores.

Elements use __ and modifiers use -- in BEM. So &__link creates .nav__link and &--active creates .nav--active.

5fill in blank

hard

Fill all three blanks to create a nested BEM structure with block, element, and modifier using &.

SASS

.form {
  &[1] {
    margin: 1rem 0;
  }
  &[2] {
    font-weight: normal;
  }
  &[3] {
    font-weight: bold;
  }
}

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

A__input

B--disabled

C--focused

D__label

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing elements and modifiers.

Using single underscores or dashes.

Elements use __ and modifiers use --. So &__label creates .form__label, &--disabled creates .form--disabled, and &--focused creates .form--focused.