Methodologies

CSS stands out among programming languages (if it even is one… but that's a whole other debate!) as one of the few that has given birth to methodologies that aim to codify the “right” way to write it.

While BEM is ahead of the pack here, Atomic CSS is also starting to gain ground with its completely new utility-class-driven philosophy.

In the end, we might never find the one true way to write CSS, but that's not going to stop us from looking!

Awareness, interest, and satisfaction ratio rankings. Note that these three ratios all correspond to the same point in time.

Awareness (Total Respondents - Never heard)/Total Respondents
Interest Interested/(Interested + Not interested)
Satisfaction Would use again/(Would use again + Would not use)

The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience
overall
<1
1~2
2~5
5~10
10~20
>20
BEM
54.2%
33.04%
50.99%
56.91%
63.6%
64.88%
55.76%
Atomic CSS
20.23%
2.64%
11.49%
20.98%
28.12%
29.93%
28.24%
OOCSS
16.74%
3.08%
7.73%
12.66%
23.16%
28.17%
25.65%
SMACSS
16.1%
2.2%
6.58%
11.64%
21.86%
27.51%
26.82%
ITCSS
6.61%
0%
2.82%
5.03%
10.17%
11.52%
10.12%
Difference from overall usage:
-20%-10%0+10%+20%

The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), while the following columns show the usage ratio for each “yearly salary” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Salary Range (USD)
overall
0
0~10k
10~30k
30~50k
50~100k
100~200k
>200k
BEM
56.64%
37.9%
52.14%
59.89%
63.04%
63.33%
64.53%
55.64%
Atomic CSS
22.26%
9.94%
13.69%
21.05%
26.49%
27.71%
32.11%
24.81%
OOCSS
18.47%
7.88%
9.76%
15.94%
21.47%
22.31%
28.62%
23.31%
SMACSS
18.29%
7.88%
11.07%
14.87%
18.94%
21.52%
28.18%
25.56%
ITCSS
7.06%
2.63%
4.17%
5.77%
10.03%
10.07%
9.98%
6.77%
Difference from overall usage:
-20%-10%0+10%+20%

BEM

Completion Percentage: 98.99% (11203)
Completion Percentage: 98.99% (11203)
Percents%CountΣ
I've USED it before, and WOULD use it again51.6%
I've USED it before, and would NOT use it again8.24%
I've HEARD of it, and WOULD like to learn it12.53%
I've HEARD of it, and am NOT interested9.11%
I've never heard of it17.51%

You will not be surprised to hear that BEM is an abbreviation of the key elements of the methodology — Block, Element and Modifier.

Atomic CSS

Completion Percentage: 98.69% (11169)
Completion Percentage: 98.69% (11169)
Percents%CountΣ
I've USED it before, and WOULD use it again19.87%
I've USED it before, and would NOT use it again4.76%
I've HEARD of it, and WOULD like to learn it24.16%
I've HEARD of it, and am NOT interested17.5%
I've never heard of it32.39%

Atomic CSS is a CSS architecture. It is not opinionated; it simply defines a set of classes representing single-purpose styling units.

OOCSS

Completion Percentage: 98.41% (11137)
Completion Percentage: 98.41% (11137)
Percents%CountΣ
I've USED it before, and WOULD use it again15.45%
I've USED it before, and would NOT use it again4.55%
I've HEARD of it, and WOULD like to learn it18.11%
I've HEARD of it, and am NOT interested19.98%
I've never heard of it40.32%

OOCSS, or object-oriented CSS, is a methodology to help programmers write CSS that is succinct and easy to maintain.

SMACSS

Completion Percentage: 98.47% (11144)
Completion Percentage: 98.47% (11144)
Percents%CountΣ
I've USED it before, and WOULD use it again14.92%
I've USED it before, and would NOT use it again4.18%
I've HEARD of it, and WOULD like to learn it16.04%
I've HEARD of it, and am NOT interested18.39%
I've never heard of it44.95%

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.

ITCSS

Completion Percentage: 99.03% (11207)
Completion Percentage: 99.03% (11207)
Percents%CountΣ
I've USED it before, and WOULD use it again6.99%
I've USED it before, and would NOT use it again1.29%
I've HEARD of it, and WOULD like to learn it6.31%
I've HEARD of it, and am NOT interested9.47%
I've never heard of it74.97%

ITCSS is a sane, scalable, managed CSS architecture from CSS Wizardry