Block-Element-Modifier (BEM) Methodology
BEM helps you name classes in a way that clearly indicates relationships and allows predictable styling.
.btn {
display: inline-block;
padding: 0.5rem 1rem;
}
/* Element */
.btn__icon {
margin-right: 0.5rem;
}
/* Modifier */
.btn--primary {
background: var(--clr-primary);
color: var(--clr-white);
}
.btn--secondary {
background: transparent;
border: 2px solid var(--clr-primary);
}
Key BEM Points
- Block — standalone component (e.g.
.btn). - Element — part of a block (e.g.
.btn__icon). - Modifier — variation of block or element (e.g.
.btn--primary). - Use double underscore
__and double hyphen--for clarity.
Object-Oriented CSS (OOCSS)
OOCSS encourages separation of structure (containers) and skin (visuals), and promotes reusable “objects” that can be combined.
/* Structure */
.media {
display: flex;
align-items: flex-start;
}
.media__img {
flex: 0 0 auto;
}
.media__body {
flex: 1;
padding-left: 1rem;
}
/* Skin */
.rounded {
border-radius: 0.5rem;
}
.shadow {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
Key OOCSS Points
- Separate structure (layout) from skin (visuals).
- Create small, reusable objects (e.g.
.media,.rounded). - Combine objects to build complex components without duplication.
- Keep your CSS DRY and maintainable as the codebase grows.