Summary - Component library
Build a component library skeleton with BEM and cascade layers.
Component library skeleton
A component library gathers reusable interface parts in one place: buttons, cards, forms, alerts. Each component is named with BEM and its styles live in @layer layers. The library then stays consistent and easy to change across apps.
A typical skeleton: a base layer for reset and typography; a components layer with a section per component; a utilities layer for helper classes. Changing one component touches only that section; no clash, low specificity, easy maintenance.
Exercise Add a button to the component library
Add the @layer base, components; order at the top. Then inside an @layer components block, write a BEM trio: .button block with display: inline-flex; .button--primary modifier with background: navy and color: white.
Show example solution
/* add the layer order and the button BEM */
@layer base, components;
@layer components {
.button {
display: inline-flex;
}
.button--primary {
background: navy;
color: white;
}
}How the skeleton grows
A component library grows over time. Adding a new component means: open a new BEM block in the components layer and use those classes in HTML. The risk of breaking old components stays low because every class is flat and tied to a layer.
The summary of this approach: names with BEM (block, element, modifier), order with @layer, specificity low with flat classes. Together they keep CSS consistent and easy to maintain even in large projects.
Test yourself
-
Match each architecture piece to its role
- base layer
- Reset and typography
- components layer
- Component styles
- utilities layer
- Helper classes
- .button--primary
- BEM modifier
-
Which approach is recommended for a component library?
- BEM names + @layer layers
- A single style.css + !important
- Id selectors + nested selectors
- Type selectors only
Show answer
BEM names + @layer layers — Correct. BEM classes are flat and low-specificity; @layer controls clashes through layer order.