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

Need a 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
}

Need a 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
  }
}

Need a 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
    }
  }
}

Need a hint?

Use CSS properties inside each selector to add the styles.