The State of CSS 2019
And after a few months of data processing and visualizing, I'm happy to finally be able to share with you the first ever State of CSS survey results!
I definitely encourage you to check out the full results, but in the meantime here are a few trends we noticed looking at the data.
Layout Features Overview
There are a few probably reasons for this. Flexbox has been around for longer, and came around at a time where we desperately needed an alternative to floats for layout. Also, Grid is admittedly a little bit more complex (but also much more powerful!).
The truth is that both Grid and Flexbox have their pros and cons, and they should both be part of a developer's toolbox. So it wouldn't surprise us if those two circles become much more similar over the next couple years!
Ranking CSS frameworks for awareness, interest, and satisfaction
For years Bootstrap was the uncontested king of UI frameworks. This shows up clearly in our data, with a whopping 99% of respondents being aware of it. No other competitor comes close in terms of awareness, with second-best Foundation coming in at “just” 79%.
It shouldn't be surprising that this high awareness corresponds with a low interest ratio, since developers who haven't yet used Bootstrap for whatever reason are probably not that keen to start now. More worrying is the comparatively low satisfaction ratio, at just 52%.
Contrast this with Tailwind, which boasts a 81% satisfaction ratio! It might have a low awareness score (only 34% of respondents knew about it), but it's making its users very happy and at the end of the day that's the most important factor. And right behind it with 74% is Bulma, which shares a lot of the same “utility-first” concepts as Tailwind.
Are we moving away from big, monolithic frameworks like Bootstrap towards more nimble, pick-what-you-want libraries like Tailwind? In any case, it'll definitely be interesting to keep an eye on this trend over the next few years.
Plotting satisfaction percentages vs user counts
The above chart of CSS technologies is divided into four quadrants, and as you can see the “Assess” quadrant (corresponding to up-and-coming technologies with low user counts but high satisfaction) is by far the busiest.
In fact there are only three “established” technologies in the “Adopt” quadrant (high usage, high satisfaction): BEM, Sass, and Bootstrap. And Bootstrap is getting dangerously close to falling off…
This goes to show that things are still very much in flux in the CSS world, which can be surprising for an ecosystem that has been around for so long. But this is the world of web development after all: as soon as you think you've finally figured it out, something new comes along and makes you question everything you thought you knew!
If you're a podcast listener, keep an eye out for my appearance on The Changelog, where I talk more about the data, address some controversies about our data collection process, and give you a behind-the-scenes look at our tech stack.
Finally, if you want to make sure you don't miss a chance to take part in upcoming survey (or know when we publish additional data), be sure to sign up for our (very infrequent) mailing list. After all the more respondents we have, the more useful our data will be!
Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.
Quickies CSS Tutorial: CSS Variables - How to create white - dark themes easily