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.

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