Functional CSS with Tailwind
Typical Styling Conventions
- Use Block Element Modifier (BEM)
- Create a component sass partial `_user-card.scss`
- Add elements `.user-card__title`
- Add modifiers `.user-card__status--active`
Problem With BEM
It's not descriptive
Potential bad abstractions
Naming things is hard already
Need to open template + sass files side by side for all information
☝️ (I'm lazy)
![]()
Tony
Front End Developer @ TC
I see things are broken into appropriate sections, but I have no idea what it looks like
Much Better: Functional/Utility CSS
- Highly composable, low level utility classes
- More descriptive class names
- Allows you to get more information from the template
Example
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.bg-black {
background-color: #22292f;
}