This year's State of CSS survey offers a great tool they call the Data Explorer.
For exemple, here is a view of developer's usage of scroll snap properties, combined with their usage of Bootstrap.
It looks a bit complicated, but I will explain that in a moment.
We all have simplified beliefs about CSS :
- "If you use Tailwind, it's because you don't want to learn CSS"
- "But Tailwind solved CSS, it's the way to go!"
As always, the reality is more complex, and I thought this tool was a great opportunity to explore the relationship between CSS frameworks and native CSS.
Maybe a good start would be to agree on two things :
- You don't need to know every CSS property to be a good CSS developer. It's all about building a good mental model of how CSS works.
- At the same time, it's valuable to know a good quantity of CSS properties, so that we are able to use them when needed, like a toolbox.
I hope that's non-controversial. Let's go!
Bootstrap methodology
Bootstrap has been used by 81% of this survey respondents. Historically, it is the CSS framework.
Let's define Bootstrap users categories :
| % | Opinion | Code name |
|---|---|---|
| 51.7% | used it but would not use again | The ex-users |
| 29% | used it, would use it again | The lovers |
| 16.3% | heard of it but are not interested | The indifferent |
| 2.7% | did not try it but are interested | The curious |
| 0.5% | never heard of it | The uninformed |
Who do you think will have the best native CSS knowledge?
So, let's look at what the data explorer tells us, with the exemple of the scroll snap properties. Here's a close-up on a specific cell:
Here's how you read it: overall, 34% of this survey respondents used scroll snap properties. However, if you look only at bootstrap lovers, only 26% also used scroll snap, so 8 points less.
So here's what I've done : in a horrible document that you don't need to open, I've notated these variations for the 53 presented properties, and for our 5 types of developers.
Bootstrap results
Here are our five developers categories, from "less native CSS friendly" to "most native CSS friendly":
| Code name | Native CSS knowledge variation |
|---|---|
| The uninformed | -11 points |
| The curious | -9 points |
| The lovers | -2 points |
| The indifferent | no variation |
| The ex-users | +2 points |
The uninformed
The uninformed (who don't know what bootstrap is) category is correlated with a poor native CSS knowledge score: -11 points.
Personal theory: Bootstrap is so widely used that if you don't know about it (only 0.5% of respondents), you are probably new to CSS. So it makes sense you don't know a lot about native CSS yet.
Please keep in mind that personal theories are theories. And personal.
The curious
The curious (who are interested in discovering it) category is also correlated with a decrease of -9 points.
Personal theory: they might also be beginners who did not have the time to try it yet. They want to try it because it's very popular and it's too soon for them to decide to pass on it.
The lovers
The lovers (who used it and would use it again) are doing much better, but still -2 points below the average.
Personal theory: they know a lot more than the uninformed and the curious because they may been coding with bootstrap (among other tools) for years and gathered lots of CSS knowledge along the way. Still, the usage of Bootstrap doesn't facilitate discovering new CSS features, or Boostrap is good enough for what they do and they don't care as much (or don't have the time to care!).
The indifferent
The indifferent (who know about Bootstrap but are not intersted) perform like the average population.
Personal theory: deciding you are not interested in a tool means you have a sufficient understanding of what are CSS challenges to decide that Bootstrap is not for you. Other tool might be stealing the attention too, but it does not prevent the indifferent from discovering native CSS features.
The ex-users
The ex-users (who used Bootstrap but would not used it again) do better than the average : +2 points.
Personal theory: learning a CSS framework and deciding to stop using it is a long process, so they have substential experience. They said goodbye to Bootstrap because their approach of CSS evolved (and CSS evolved itself, allowing this move for some Bootstrap's users). They even may have witness the long transformation of CSS through the years. They decided this tool is not for them anymore and use modern native CSS more. Also, you don't always choose your tools: they could have been asked to use Bootstrap by an employer or a client, while still investing in native CSS knowledge in parallel.
Here are the details grouped by categories:
The biggest gap (-8 points) between the ex-users and the lovers is the interaction category (scroll-snap, touch actions, overscroll-behavior...).
I think it should also be noted that the lovers category is correlated with a lesser knowledge of accessibility related CSS features (-5 points compared to the ex-users).
Tailwind methodology
Now let's talk about the new boss in CSS town.
First, our users categories:
| % | Opinion | Code name |
|---|---|---|
| 36.4% | used it, would use it again | The lovers |
| 25% | heard of it but are not interested | The indifferent |
| 25% | did not try it but are interested | The curious |
| 9.8% | used it but would not use again | The ex-users |
| 4.1% | never heard of it | The uninformed |
Who do you think will perform better this time?
Tailwind results
The order has changed! Indeed, the lovers now perform better than the indifferent.
And the numbers vastly changed too.
| Code name | Native CSS knowledge variation |
|---|---|
| The uninformed | -9 points |
| The curious | -5 points |
| The indifferent | +1 point |
| The lovers | +2 points |
| The ex-users | +6 points |
The uninformed
The uninformed (who don't know what tailwind is) category is correlated with a poor native CSS knowledge score: -9 points.
Personal theory: same as people who don't know about Bootstrap. If you don't know about Tailwind you may be just starting to discover the CSS ecosystem. But you could also have years of experience and not be really informed about recent CSS news, which might be why this is "only" 9 points below the average (while for Bootstrap it was 11).
The curious
The curious (who are interested in discovering Tailwind) category is also correlated with a decrease of -5 points.
Personal theory: It's less than with Bootstrap (-9 points), but the logic could be the same. If you did not try this hugely popular tool yet or did not have enough perspective to decide to pass on it, you might still be discovering CSS, so it makes sense that you don't know everything about native CSS either. Still, it's less than with Bootstrap. If you heard about Tailwind, it means that you're interested in the current state of CSS, while you could have heard of Bootstrap a long time ago.
The indifferent
The indifferent (who know about Tailwind but are not intersted) do a little better than the average: 1 point.
Personal theory: same as Bootstrap. These developers have enough experience to judge if a tool would be interesting to them or not. With this experience comes an good knowledge of native CSS, too, just above the average. But...
The lovers
The lovers (who used Tailwind and would use it again) are in completly different position than earlier. With Bootstrap, they knew less (-2 points), but with Tailwind, they know more : +2 points! Even more than the indifferent.
Personal theory: contrary to what is sometimes said, loving Tailwind is not correlated with a lesser knowledge of native CSS features. First, let's remember that with its utility classes, Tailwind uses an approach that is closer to native CSS than Bootstrap. So a Tailwind user knows about things like flex, whereas a Bootstrap user would use a "column" class (which is actually flexbox in disguise and has nothing to do with actual CSS columns...). Then, there's the fact that Tailwind is a recent tool. If you read articles about it, there's almost no way that you don't read articles about native CSS improvements too. It's part of the modern ecosystem. That being said...
The ex-users
The ex-users (who used Tailwind but would not used it again) perform much better than the average : +6 points.
Personal theory: while Tailwind users are part of a modern ecosystem and know their CSS, well, people who turned their back on Tailwind seem to know more. First, Tailwind does not (nor claims to) solve or cover everything. Some modern CSS features, like :has, container queries, cascade layers, @supports queries... just require you to know them natively to be used at their full potential. That doesn't mean that Tailwind users don't know about them and can't use both, but developers who were dissatisfied with the Tailwind approach simply seem to invest more in native CSS understanding. That doesn't make them better people, but their toolbox seems to be wider.
Here, the biggest gap between the ex-users (-8 points) and the lovers is the selectors category, which contains ::marker, :has and :where. Tailwind lovers don't use them very much.
Once again, there is also a huge gap in the accessibility deparment: while Tailwind lovers do perform better than the average (+2 points), the ex-users perform much better (+9 points).
Conclusion
I hope this little experiment was interesting to you. This is not a scientific study reviewed by peers, so please take with a grain of salt, though I did my best with what I had. Don't forget about the sample bias: people participating to a CSS survey cannot be representative of all developers in the world.
Here are some possible conclusions I submit to you:
About Bootstrap
Bootstrap is on the decline, and maybe that's ok. It has been a part of a lot of developer's journeys, but still using it today correlates with a lesser knowledge of valuable CSS features. It's not a bad tool and saved many developers back in the days, but it now struggles to stay relevant.
I don't want people to move away from Bootstrap if they are good with it: the only thing that matters is always the quality of what we're building. They just should be aware that there's a lot more to CSS today (and a lot of them already are, I'm sure).
About Tailwind
No, someone loving Tailwind does not make them ignorant about "actual CSS". They use a modern CSS tool, and gathered substential native CSS knowledge along the way. They may have learn native CSS recently and their knowledge could be more up to date than someone who knew a lot about CSS a decade ago and did not keep up to date.
However, they should also be conscious that mastering Tailwind is not and cannot be mastering CSS, if such a thing exists. Some features simply can't translate to Tailwind. It does not prevent to write good CSS with Tailwind, but it narrows the theorical toolbox size. Tailwind users eager to keep learning could reinvest the motivation that made them learn Tailwind to continue learning about native CSS features, which are there to stay and will transfer from tool to tool.
About native CSS
2022 has been a great year for CSS and I feel that knowing about these native features is a powerful asset for any developer.
Of course, it does not replace a deep understanding of CSS logic, which is not just a list of properties, but it provides a great toolbox to overcome various challenges.
For both Bootstrap and Tailwind, people who knew more about native CSS were also the ones who had actually tried the framework. So maybe don't reject every tool based on some purity principle: discovering new ways of writing CSS — even if you realize they don't suit you in the end — may be valuable and could shed a new light on how you write native CSS.
What are your thought on this? If you reach any different conclusions, let me know. Please be respectful to everyone, it's only CSS ;)
Thanks for reading!
Top comments (3)
Great article! I can't wait to see what other research people are able to do using the data explorer :)
I tried using tailwind once; it was tragic. Mainly because my foundation in native CSS wasn't strong enough. Now I am still getting better at the fundamentals of native css and I think I am ready for tailwind now. Anyway, great article, Bastien. Really intriguing.
Tailwind and Bootstrap are for n00bs