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.