BEM naming with SASS nesting

Introduction

BEM helps keep CSS organized by naming parts clearly. SASS nesting lets you write CSS inside CSS, making it easier to follow BEM rules.

You want to style a button with different parts like icon and label.

You have a card component with header, body, and footer sections.

You want to keep CSS code clean and easy to read for a navigation menu.

You need to style modifiers like a button in active or disabled state.

You want to avoid repeating long class names in your CSS.

Syntax

SASS

.block {
  // block styles
  &__element {
    // element styles
  }
  &--modifier {
    // modifier styles
  }
}

The & symbol means "use the parent selector here".

BEM uses block, block__element, and block--modifier naming.

Examples

This styles a button block, its icon element, and a large modifier.

SASS

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

Here a card block has header and body elements, plus a highlighted modifier.

SASS

.card {
  border: 1px solid #ccc;
  &__header {
    font-weight: bold;
  }
  &__body {
    padding: 1rem;
  }
  &--highlighted {
    border-color: gold;
  }
}

Sample Program

This example shows a blue button with an icon and larger size using BEM naming and SASS nesting compiled CSS.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>BEM with SASS Nesting Example</title>
  <style>
    /* Compiled CSS from SASS below */
    .button {
      background-color: #007bff;
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.375rem;
      font-size: 1rem;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .button__icon {
      margin-right: 0.5rem;
      font-size: 1.25rem;
    }
    .button--large {
      font-size: 1.5rem;
      padding: 1rem 2rem;
    }
  </style>
</head>
<body>
  <button class="button button--large" aria-label="Send message">
    <span class="button__icon" aria-hidden="true">📧</span>
    Send
  </button>
</body>
</html>

Important Notes

Use aria-label and aria-hidden for accessibility on icons and buttons.

Nesting helps avoid repeating the block name but don't nest too deep to keep CSS simple.

BEM naming makes it easy to find styles related to a component in your CSS files.

Summary

BEM naming breaks CSS into blocks, elements, and modifiers for clarity.

SASS nesting lets you write BEM styles inside the block for cleaner code.

Use BEM with nesting to keep your CSS organized and easy to maintain.

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