The State of CSS 2019: Methodologies

English

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!

Rankings

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)

Usage by Years Of Experience

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

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%

2.82%

5.03%

10.17%

11.52%

10.12%

Difference from overall usage:

-20%-10%0+10%+20%

Usage by Salary Range

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

Salary Range (USD)

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)

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)

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)

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)

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)

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

Methodologies

Rankings

Usage by Years Of Experience

Usage by Salary Range

BEM

Links

Atomic CSS

Links

OOCSS

SMACSS

ITCSS

Links