Rename to BEM – CSS Exercise with Solution

Remove the deep selectors, and use BEM names.

What to build

The same design with flat BEM classes.

Requirements

The outer element has the class product, and also product--sale.
The heading has the class product__name, and the paragraph has product__price.
The heading is navy, and the price is gray, except inside .product--sale, where the price is crimson.
Each selector contains no spaces and no type selectors, apart from the modifier rule.

Constraints

Do not use ids.

Example

.menu__link--active is a modifier of an element.

Why it works

Single-class selectors have the same specificity everywhere, and the name itself tells you where each style belongs.

Hints

Hint 1

The block is product.

Hint 2

Elements use two underscores, and modifiers two dashes.

Hint 3

Each selector becomes a single class.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BEM</title>
  <style>
    .product__name { color: navy; }
    .product__price { color: gray; }
    .product--sale .product__price { color: crimson; }
  </style>
</head>
<body>
  <div class="product product--sale">
    <h2 class="product__name">Tea</h2>
    <p class="product__price">120</p>
  </div>
</body>
</html>

Lesson: Keeping CSS maintainable →