Challenge - BEM architecture

Build a large component architecture with BEM and cascade layers.

BEM and cascade layers

In a large interface BEM class names make the role clear, while the @layer declaration decides the order in which overlapping declarations settle. .card__title reads as an element; .card--featured as a modifier.

Open an @layer components block and place .card declarations inside; those declarations drop to a lower priority. A .card declaration written outside the layer wins the clash. BEM naming and layer order keep specificity predictable.

Exercise Write a BEM card component inside @layer

Build a card component. Open an @layer components block and place these declarations inside: .card with padding: 1.5rem; .card__title with font-size: 1.25rem and font-weight: 600; .card--featured with border: 2px solid #f59e0b.

Show example solution

/* card component */
@layer components {
  .card { padding: 1.5rem; }
  .card__title { font-size: 1.25rem; font-weight: 600; }
  .card--featured { border: 2px solid #f59e0b; }
}

Test yourself

If a .card declaration inside an @layer block clashes with a .card declaration outside it, which wins?
```
@layer components {
  .card { padding: 1rem; }
}
.card { padding: 2rem; }
```
- The declaration outside the block wins
- The declaration inside the block wins
- Neither is applied
- Source order alone decides
Show answer

The declaration outside the block wins — Correct. The declaration outside the layer overrides the one inside; unlayered declarations hold the highest priority.
Match BEM and layer concepts

.card

Block
.card__title

Element
.card--featured

Modifier
@layer components

Priority layer

Complete the modifier class

/* featured variant of the card */
.____ {
  border: 2px solid #f59e0b;
}

Show answer

/* featured variant of the card */
.card--featured {
  border: 2px solid #f59e0b;
}

Next lesson: Challenge - Container system

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies