BEM naming with SASS nesting - Mini Project: Build & Apply

BEM Naming with SASS Nesting

📖 Scenario: You are creating styles for a simple card component on a webpage. The card has a title, a description, and a button. You want to use the BEM naming method to keep your CSS organized and easy to read.

🎯 Goal: Build a SASS stylesheet using BEM naming conventions with nesting to style a card component. The card block is card. It has elements __title, __description, and __button. The button also has a modifier --primary for a special style.

📋 What You'll Learn

Create a SASS block selector for .card.

Nest element selectors for .card__title, .card__description, and .card__button inside .card.

Nest a modifier selector .card__button--primary inside .card__button.

Use nesting to keep the code clean and follow BEM naming exactly.

💡 Why This Matters

🌍 Real World

Using BEM with SASS nesting helps keep CSS organized and easy to maintain in real web projects with many components.

💼 Career

Front-end developers often use BEM and SASS nesting to write scalable and readable stylesheets for websites and apps.

1

Create the BEM block selector

Write a SASS selector for the BEM block .card.

SASS

// Create the BEM block selector for .card
// Your code here

Hint

Start by writing .card { } to define the block.

2

Add nested element selectors

Inside the .card block, nest selectors for the elements .card__title, .card__description, and .card__button using SASS nesting.

SASS

.card {
  // Nest .card__title, .card__description, and .card__button selectors here
  // Your code here
}

Hint

Use &__element inside .card to nest elements.

3

Add a modifier selector for the button

Inside the nested &__button selector, nest a modifier selector &--primary to style the primary button variant.

SASS

.card {
  &__title {
  }
  &__description {
  }
  &__button {
    // Nest the modifier &--primary here
    // Your code here
  }
}

Hint

Inside &__button, write &--primary { } to create the modifier.

4

Add simple styles to complete the card

Add a background color lightgray to .card, a font size 1.5rem to &__title, a font size 1rem to &__description, a padding 0.5rem 1rem to &__button, and a background color blue with white text color to &--primary.

SASS

.card {
  // Add background color lightgray
  // Your code here
  &__title {
    // Add font size 1.5rem
    // Your code here
  }
  &__description {
    // Add font size 1rem
    // Your code here
  }
  &__button {
    // Add padding 0.5rem 1rem
    // Your code here
    &--primary {
      // Add background color blue and text color white
      // Your code here
    }
  }
}

Hint

Use CSS properties inside each selector to add the styles.

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