CSS Methodologies

Codified ways to write cleaner CSS.

Rankings

Export
SatisfactionS
InterestI
UsageU
AwarenessA

Satisfaction, interest, usage, and awareness ratio rankings.

2019202020192020BEMAtomic CSS (Utility-first CSS)OOCSSSMACSSITCSSBEMAtomic CSS (Utility-first CSS)OOCSSSMACSSITCSSCUBE CSS86%82%81%83%77%66%78%67%84%78%61%

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.

Experience Over Time

Export
Percents%
CountΣ

Overview of opinions on the technologies surveyed over time.

もう使わない
興味がない
また使いたい
興味がある
知らない
2019202020192020

BEM

2019202020192020

Atomic CSS (Utility-first CSS)

2019202020192020

OOCSS

2019202020192020

SMACSS

2019202020192020

ITCSS

Technologies with only one year of data are not included.

Positive/Negative Split

Export

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.

もう使わない興味がないまた使いたい興味があるAwareness50%40%30%20%10%0%10%20%30%40%50%60%70%50%40%30%20%10%0%10%20%30%40%50%60%70%BEMAtomic CSS (Utility-first CSS)ITCSSCUBE CSSSMACSSOOCSS

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

Export
Percents%
CountΣ

2019

8.3% 8.3% 9.2% 9.2% 52.1% 52.1% 12.7% 12.7% 17.7% 17.7%

2020

12.1% 12.1% 8.7% 8.7% 54.7% 54.7% 9.5% 9.5% 15% 15%
もう使わない
興味がない
また使いたい
興味がある
知らない

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

Export
Percents%
CountΣ

2019

17.7% 17.7% 20.1% 20.1% 24.5% 24.5% 32.8% 32.8%

2020

14.8% 14.8% 30.9% 30.9% 19.9% 19.9% 28.2% 28.2%
もう使わない
興味がない
また使いたい
興味がある
知らない

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

Export
Percents%
CountΣ

2019

20.3% 20.3% 15.7% 15.7% 18.4% 18.4% 41% 41%

2020

21.8% 21.8% 12.1% 12.1% 13.2% 13.2% 46.8% 46.8%
もう使わない
興味がない
また使いたい
興味がある
知らない
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

18.7% 18.7% 15.1% 15.1% 16.3% 16.3% 45.6% 45.6%

2020

20% 20% 12.1% 12.1% 11.8% 11.8% 50.1% 50.1%
もう使わない
興味がない
また使いたい
興味がある
知らない

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

Export
Percents%
CountΣ

2019

9.6% 9.6% 75.7% 75.7%

2020

10.9% 10.9% 7.7% 7.7% 72.7% 72.7%
もう使わない
興味がない
また使いたい
興味がある
知らない

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

Export
Percents%
CountΣ

2020

7.4% 7.4% 84.1% 84.1%
もう使わない
興味がない
また使いたい
興味がある
知らない

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

Export
Percents%
CountΣ

Other tools in this category (freeform answers).

Overall Happiness

Export
Percents%
CountΣ

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

0%10%20%30%40%50%Percentage of Usersとても不満不満どちらでもない満足とても満足Happiness0%10%20%30%40%50%2.4%2.4%7%7%50.5%50.5%31.6%31.6%8.5%8.5%

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.
« Previous: CSS FrameworksNext: CSS-in-JS »
Charts built with Nivo. Hosted by Netlify.
質問があったり、バグを見つけたときはissueを立ててください。 Discordに参加。
option/altを押して翻訳モードにする。