CSS Methodologies
Codified ways to write cleaner CSS.
Satisfaction, interest, usage, and awareness ratio rankings.
Technologies with less than 10% awareness not included. Each ratio is defined as follows:
- Satisfaction: would use again / (would use again + would not use again)
- Interest: want to learn / (want to learn + not interested)
- Usage: (would use again + would not use again) / total
- Awareness: (total - never heard) / total
Experience Over Time
Overview of opinions on the technologies surveyed over time.
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
Technologies with only one year of data are not included.
Positive/Negative Split
This chart splits positive (“want to learn”, “would use again”) vs negative (“not interested”, “would not use again”) experiences on both sides of a central axis.
Bar thickness represents the number of respondents aware of a technology.
BEMCompletion percentage: 80.9% (9302)Completion percentage: 80.9% (9302)
You will not be surprised to hear that BEM is an abbreviation of the key elements of the methodology — Block, Element and Modifier.
2019
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
Atomic CSS (Utility-first CSS)Completion percentage: 81.1% (9323)Completion percentage: 81.1% (9323)
Atomic CSS is a CSS architecture. It is not opinionated; it simply defines a set of classes representing single-purpose styling units.
2019
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
OOCSSCompletion percentage: 81.1% (9325)Completion percentage: 81.1% (9325)
OOCSS, or object-oriented CSS, is a methodology to help programmers write CSS that is succinct and easy to maintain.
2019
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
My 2020 Pick: The CSS Cascade
With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade.
Sacha Greif
SMACSSCompletion percentage: 81.2% (9331)Completion percentage: 81.2% (9331)
SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process.
2019
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
ITCSSCompletion percentage: 81% (9313)Completion percentage: 81% (9313)
ITCSS is a sane, scalable, managed CSS architecture from CSS Wizardry
2019
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
CUBE CSSCompletion percentage: 81.1% (9317)Completion percentage: 81.1% (9317)
2020
| Would not use | |
| Not interested | |
| Would use again | |
| Interested | |
| Never heard |
Other ToolsCompletion percentage: 0.9% (99)Completion percentage: 0.9% (99)
Other tools in this category (freeform answers).
Overall Happiness
On a scale of one (very unhappy) to five (very happy), how happy are developers with the current overall state of this category?