CSS Methodologies

Codified ways to write cleaner CSS.

SatisfactionS
InterestI
UsageU
AwarenessA

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 vs would not use again.
  • Interest: want to learn vs not interested.
  • Usage: would use again + would not use again vs awareness.
  • Awareness: total - never heard.

Overview of opinions on the technologies surveyed over time.

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Technologies with only one year of data are not included.

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.

BEM
Completion percentage: 80.9% (9302)
Completion percentage: 80.9% (9302)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Atomic CSS (Utility-first CSS)
Completion percentage: 81.1% (9323)
Completion percentage: 81.1% (9323)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

OOCSS
Completion percentage: 81.1% (9325)
Completion percentage: 81.1% (9325)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم
We asked members of the CSS community to share their “pick of the year”

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.

We asked members of the CSS community to share their “pick of the year”

Sacha Greif

Creator of this survey

SMACSS
Completion percentage: 81.2% (9331)
Completion percentage: 81.2% (9331)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

ITCSS
Completion percentage: 81% (9313)
Completion percentage: 81% (9313)

Export
Percents%
CountΣ

2019

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

CUBE CSS
Completion percentage: 81.1% (9317)
Completion percentage: 81.1% (9317)

Export
Percents%
CountΣ

2020

استفاده نمیکنم
برام جالب نیست
دوباره ازش استفاده میکنم
جاله برام
تا حالا نشنیدم

Other Tools
Completion percentage: 0.9% (99)
Completion percentage: 0.9% (99)

Export
Percents%
CountΣ

Other tools in this category (freeform answers).

On a scale of one (very unhappy) to five (very happy), how happy are developers with the current overall state of this category?

Recommended Resources

Scalable Modular Architecture for CSS (SMACSS)

CSS architecture expert Jonathan Snook shares his experience building large sites with large teams to make your CSS more maintainable using his SMACSS methodology.
Thanks to our partners for supporting us! Learn more.