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.

Practice

1. What does the & symbol represent when used in Sass with BEM naming?

easy

A. It resets all styles inside the block.

B. It creates a new CSS class unrelated to the parent.

C. It imports external CSS files.

D. It refers to the current parent selector in the nested block.

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol in Sass means "use the current parent selector" inside nested rules.

2. Step 2: Connect with BEM naming

   When combined with BEM, &__element or &--modifier appends to the parent block's class name.

3. Final Answer:

   It refers to the current parent selector in the nested block. -> Option D

4. Quick Check:

   & = current parent selector [OK]

Hint: Remember & means "this block" in nested Sass [OK]

Common Mistakes:

• Thinking & creates a new unrelated class
• Confusing & with a CSS variable
• Using & to import files

2. Which of the following Sass snippets correctly uses & to create a BEM modifier for a block named .card?

easy

A. &__active { background: green; }

B. .card--active { background: green; }

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

D. &-active { background: green; }

Solution

1. Step 1: Identify BEM modifier syntax

   Modifiers use double dashes: --modifier, so &--active appends --active to the parent block.

2. Step 2: Check other options

   .card--active { background: green; } repeats the full class, not using &. &__active { background: green; } uses __ which is for elements, not modifiers. &-active { background: green; } uses a single dash, which is incorrect for BEM modifiers.

3. Final Answer:

   &--active { background: green; } -> Option C

4. Quick Check:

   Modifier = &--modifier [OK]

Hint: Use &--modifier for modifiers inside blocks [OK]

Common Mistakes:

• Using single dash instead of double dash for modifiers
• Confusing elements (__element) with modifiers (--modifier)
• Writing full class name instead of using &

3. Given the Sass code below, what CSS will it generate?

.button {
  color: blue;
  &__icon {
    margin-right: 0.5rem;
  }
  &--large {
    font-size: 2rem;
  }
}

medium

A. .button { color: blue; } &__icon { margin-right: 0.5rem; } &--large { font-size: 2rem; }

B. .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; }

C. .button { color: blue; } .icon { margin-right: 0.5rem; } .large { font-size: 2rem; }

D. .button { color: blue; } .button_icon { margin-right: 0.5rem; } .button_large { font-size: 2rem; }

Solution

1. Step 1: Understand & usage in nested selectors

   The & appends to the parent selector .button. So &__icon becomes .button__icon and &--large becomes .button--large.

2. Step 2: Write the generated CSS

   The CSS will have three selectors: .button, .button__icon, and .button--large with their respective styles.

3. Final Answer:

   .button { color: blue; } .button__icon { margin-right: 0.5rem; } .button--large { font-size: 2rem; } -> Option B

4. Quick Check:

   & + BEM = combined class names [OK]

Hint: &__element and &--modifier append to block class [OK]

Common Mistakes:

• Using underscore instead of double underscore for elements
• Not combining & with parent selector
• Leaving & in final CSS

4. Identify the error in this Sass code using BEM naming:

.menu {
  &__item {
    color: black;
  }
  &-active {
    font-weight: bold;
  }
}

medium

A. The modifier should use double dashes: &--active instead of &-active.

B. The element selector &__item is invalid and should be &-item.

C. The parent selector .menu is missing a dot.

D. The color property cannot be inside &__item.

Solution

1. Step 1: Check BEM modifier syntax

   Modifiers in BEM use double dashes --, so &-active is incorrect; it should be &--active.

2. Step 2: Verify element syntax

   &__item is correct for elements, so no error there.

3. Final Answer:

   The modifier should use double dashes: &--active instead of &-active. -> Option A

4. Quick Check:

   Modifier syntax = &--modifier [OK]

Hint: Modifiers always use double dashes -- not single [OK]

Common Mistakes:

• Using single dash for modifiers
• Confusing element and modifier syntax
• Thinking &__item is invalid

5. You want to style a BEM block .profile with an element avatar and a modifier highlighted. Which Sass code correctly combines & with BEM naming to style both the element and modifier inside .profile?

hard

A. .profile {
&__avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

B. .profile {
&-avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

C. .profile {
&__avatar {
border-radius: 50%;
}
&-highlighted {
background-color: yellow;
}
}

D. .profile {
&-avatar {
border-radius: 50%;
}
&--highlighted {
background-color: yellow;
}
}

Solution

1. Step 1: Apply BEM element syntax

   Elements use double underscore __, so &__avatar correctly targets .profile__avatar.

2. Step 2: Apply BEM modifier syntax

   Modifiers use double dash --, so &--highlighted correctly targets .profile--highlighted.

3. Step 3: Check other options

   Options A, C, and D use single dash for either element or modifier, which is incorrect in BEM.

4. Final Answer:

   .profile { &__avatar { border-radius: 50%; } &--highlighted { background-color: yellow; } } -> Option A

5. Quick Check:

   Element = &__element, Modifier = &--modifier [OK]

Hint: Use &__element and &--modifier exactly for BEM [OK]

Common Mistakes:

• Using single dash for elements or modifiers
• Mixing element and modifier syntax
• Not nesting inside the block selector