Naming conventions in CSS - Mini Project: Build & Apply

CSS Naming Conventions with BEM

📖 Scenario: You are creating a simple webpage section with a card component. To keep your CSS organized and easy to maintain, you will use a naming convention called BEM (Block Element Modifier).

🎯 Goal: Build CSS classes using the BEM naming convention for a card component with a title, description, and a button.

📋 What You'll Learn

Create a CSS block class named card.

Add element classes for title, description, and button inside the card block using BEM syntax.

Add a modifier class for the button to indicate a primary style using BEM syntax.

Use simple CSS properties to style each class so the difference is visible.

💡 Why This Matters

🌍 Real World

Using naming conventions like BEM helps teams write CSS that is easy to understand and maintain, especially in large projects with many components.

💼 Career

Front-end developers often use BEM or similar conventions to keep styles organized and avoid conflicts, making this skill valuable for professional web development.

1

Create the BEM block class

Create a CSS class called .card that sets background-color to #f0f0f0 and padding to 1rem.

CSS

/* Your code here */

Need a hint?

Use a CSS class selector .card and add the properties inside curly braces.

2

Add BEM element classes

Add CSS classes .card__title, .card__description, and .card__button. Set font-weight to bold for .card__title, font-size to 1rem for .card__description, and padding to 0.5rem 1rem for .card__button.

CSS

.card {
  background-color: #f0f0f0;
  padding: 1rem;
}
/* Your code here */

Need a hint?

Use double underscores __ to separate block and element names in BEM.

3

Add a BEM modifier class

Add a CSS class .card__button--primary that sets background-color to #007bff and color to #fff.

CSS

.card {
  background-color: #f0f0f0;
  padding: 1rem;
}
.card__title {
  font-weight: bold;
}
.card__description {
  font-size: 1rem;
}
.card__button {
  padding: 0.5rem 1rem;
}
/* Your code here */

Need a hint?

Use double hyphens -- to add a modifier to the element in BEM.

4

Complete with responsive font size

Add a media query for screens smaller than 600px that sets font-size of .card__description to 0.875rem.

CSS

.card {
  background-color: #f0f0f0;
  padding: 1rem;
}
.card__title {
  font-weight: bold;
}
.card__description {
  font-size: 1rem;
}
.card__button {
  padding: 0.5rem 1rem;
}
.card__button--primary {
  background-color: #007bff;
  color: #fff;
}
/* Your code here */

Need a hint?

Use a media query with max-width: 600px and place the CSS rule inside its block.