Combining & with BEM naming in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The & symbol represents the parent selector. It helps to write nested styles by referring back to the current block or element name in BEM.

beginner

How do you write a BEM modifier using & in Sass?

You append the modifier to the parent selector using &--modifier. For example, .button { &--primary { color: blue; } } styles .button--primary.

beginner

Why is combining & with BEM naming helpful in Sass?

It keeps your CSS organized and avoids repeating the full class name. It also makes your code easier to read and maintain by showing the relationship between blocks, elements, and modifiers.

beginner

Write a Sass snippet using & to style a BEM element .card__title inside .card.

.card {
  &__title {
    font-weight: bold;
  }
}

This compiles to .card__title { font-weight: bold; }.

beginner

How would you style a BEM modifier .nav__item--active using & inside .nav__item?

.nav__item {
  &--active {
    color: red;
  }
}

This targets .nav__item--active with red text color.

In Sass, what does &__element inside .block represent?

A A sibling element with class <code>.element</code>

B A child element with class <code>.block__element</code>

C A modifier of <code>.block</code>

D An unrelated class

&__element inside .block creates .block__element, a BEM element class.

How do you write a BEM modifier .button--large using & inside .button in Sass?

A <code>.button { &--large { ... } }</code>

B <code>.button { &__large { ... } }</code>

C <code>.button { &-large { ... } }</code>

D <code>.button { &.large { ... } }</code>

The modifier uses double dashes: &--large inside .button becomes .button--large.

What is the main benefit of using & with BEM in Sass?

A It disables CSS inheritance

B It changes the HTML structure

C It adds JavaScript functionality

D It allows nesting without repeating class names

& helps write nested CSS rules without repeating full class names, making code cleaner.

Which Sass code creates the class .menu__link--active?

A <code>.menu__link { &--active { ... } }</code>

B <code>.menu { &__link--active { ... } }</code>

C <code>.menu { &--link--active { ... } }</code>

D <code>.menu__link--active { ... }</code>

Using &--active inside .menu__link creates .menu__link--active.

If you want to style .header__nav inside .header using Sass and &, which is correct?

A <code>.header { &--nav { ... } }</code>

B <code>.header__nav { & { ... } }</code>

C <code>.header { &__nav { ... } }</code>

D <code>.header__nav { ... }</code>

&__nav inside .header creates .header__nav, the BEM element.

Explain how the & symbol helps write BEM-style CSS in Sass.

Think about how nesting works in Sass and how BEM class names are structured.

Write a Sass example using & to style a block .card, an element .card__header, and a modifier .card--featured.

Remember BEM uses double underscores for elements and double dashes for modifiers.

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