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; }