Is Tailwind Taking Over CSS? (and some other insights)

how do people feel about CSS in 2023 has Tailwind just completely taken over everything and no one's really writing CSS anymore and what new features are people actually using well we're going to find out today by looking at the state of CSS 2023 results and unlike other ones like this I'm going to focus sort of on the highlights of it and I'll go through the entire survey but I'll leave a link down below if you do want to dive through the entire thing now I haven't gone through this at all so it's going to be completely fresh but one thing I do want to say is people always ask me about this survey and sort of some of the purpose of it and part of it is the browsers are actually using this to know what features they should be prioritizing so one of the reasons that I do think it is worth taking the survey every year is let browsers know what you're interested in and what features you're using or the features you want to be using now with that out of the way let's jump on over here to the demographics or I guess we should say the T-shirt If you want to get a really snazzy looking t-shirt they do have one right there uh but let's jump over to the demographics and here we can see that this we got almost 10,000 people who have filled out the survey which is quite a a large amount and you know what we're going to zoom in a little bit on this uh I think that will make it a little bit easier for everybody watching to follow along especially if you're on your phone we can see that there's people from all over the place that have primarily in the US but uh Europe is well represented as well but that does mean that other areas that have a lot of developers might be under represented in this but by showing us this at least we know but by seeing this at least we know we can take that into account when maybe analyzing these results a little bit now the features part here is one of my favorite ones which is uh they sort of group the different things but I love this visualization here and it might take a minute to understand but one of them is the awareness and the other one is actually use of now the one thing with looking at it like this is it's a little bit I like the visualization we're sort of grouping it by types of things but if we go down we have group by awareness or by usage um so I'm going to group by awareness because I just find it makes it a little bit easier to look at and right away this makes me so happy that subgrid has very high awareness even if the usage is low um so that and even um here with container so it's two things where browser support's not perfect yet but that people know what it is so that's really good CU as browser support increases and actually containers high and subgrids about to take off with chrome supporting it so those are going to sort of become um very big I think I'm actually surprised that the medoc range context is so high I wouldn't expect that to be uh so high Awareness on there to be honest but hey that's cool what else do we have here nesting has very high awareness that makes sense to me uh even if it's low usage as well and usually the most important things current color who are the people who don't current color has been around forever um anyway that I'm glad people know about it but I would have expected that to be a lot higher uh but yeah the interesting ones are usually sort of any surprises that are at the top and as I said these are the two that make me happy and also that like we have a really big difference um in like the awareness to actual usage so but seeing what we have up here it makes perfect sense to me and I'm just really happy to see these and the other one that's interesting is always at the bottom uh font pette doesn't surprise me it's a a little bit of a it's for color fonts only um which isn't very many fonts and it just if you have a colored font you have multiple colors in that font you can change the colors using your font palette uh the Force colors to Anchor position I didn't know what it was when I did the survey it was the only feature I didn't I'm really looking forward to it though it's pretty amazing I'm actually really surprised at the low awareness for app property just because I see it talked about all the time um and I've used it in videos so that surprises me a little bit it's only supported in Chrome right now even though or is it coming to Safari I think it's being worked on or maybe it's even landed I think it's only being worked on we could always double check that later but um I'm surprised that's so low cuz that's it's really cool um what it does I'm surprised accent color is is low most of these ones I'm not too surprised at seeing down at the bottom um I really I do think at property surprises me I thought that more people would know about it view transitions I think is going to be one of the big gainers even wear I'm surprised more there's not more awareness there but accent color I'm really surprised by actually but and talking about big gainers I said wear would probably be a big Gainer here is ratios over time which is really cool uh so let's just see variables as You' expect custom properties um is just growing the big one here is oh gap for Flex box is this awareness over time or usage we're on usage okay so this is okay so Flex box Gap is is going up as you'd expect over time as um browser support increases for it uh this is stalling out filter effects is stalling out which is kind of interesting has is going up that's going to be a big Gainer container queries nesting they're going up that's not any surprises let's just look at awareness very very similar one thing we can do and this is a new feature now is this compare data thing um just you can actually like choose like presets versus like experience level for example um and actually like add different filters and get different information I'm not going to do anything now but if ever you do want to sort of analyze the data based on years of experience by location other stuff like that you can actually do that now with this little toggle there which is really cool all right so Frameworks let's see what's going on here and oh look at that they're all going down except for Pure CSS which is saying stagnant basically so that's interesting um yeah look at this drop on some of these that's really bulma's really going down I mean I think this speaks probably to oh what's this one open look at open props way up there that's Adam argy's uh one look at that that's awesome and what's that Uno CSS which I've heard good things about but I haven't tried yet um but that's really cool that um that so many people are is that using retention so okay so retention means people that are continuing have used it and continuing I'm assuming the bootstraps always going to be at 100% across the top uh so this is so Tailwinds oh wait Tailwinds going up every everybody knows about towin I'm surprised it's not at 100 there to be honest uh let's at usage so you okay yeah that's what I was expecting let's at retention interesting that Twin's retention is actually dropping a little bit that's I don't know I'm really surprised by that but usage you can see it's still going up so more people are using it even though it's still only at 50% I honestly with what you hear I would have expected it to be a lot higher it sounds like everybody's using it and I'm the only person who doesn't anymore um so I do find that interesting what I think is it's finding its place and the people who love it are really love it and will continue to use it and the the thing with its retention dropping off a little bit is probably exactly that you're it's finding that balance where the people who really like it are continuing to use it and there's new people trying it that are like it's not really for me and they're not using it anymore um and and I really do feel like for most people it is that love and hate people either are it's it's the bees knes for them or it's just not for them um so and I think that's what it's doing is it's finding its place right there just like I mean pure CSS look at that consistency right there so I wouldn't be surprised finding something like that um with everything else sort of dying off along the way and bootstrap slowly but surely declining um but not it's probably going to be around forever just because it's so there right um but really interesting what about interest even interest in Tailwind is slowly going down I guess once again just cuz people are not you know they either know it or they don't at this point um and whether they want to use it or not um but yeah that that really does actually surprise me quite a bit next is CSS injs which I know people uh are are a bit split on as well um this is one of those places I've mentioned this every year when I look at the survey results but just by having so many of them it to me shows me that none of them are really perfect um because they're all sort of have the same idea um they just do it in different ways uh a little bit um and this is retention let's just go to awareness again and you can see like it's pretty they're all pretty at this stage like established uh interest slowly dropping for all of them a little bit which doesn't surprise me especially as people move to like using Tailwind instead of CSS and JJs Solutions or of course there's other you know between view um spelt and uh Astro and some other ones probably where you just have like simple scope styling within it you don't really need these as much um so yeah you can see that I think once again it's a little bit like people who use it like it it works for them and then other people that don't need it aren't using it um and they sort of have their Niche um just looks like CSS modules has gained a little bit on styled components which these two have always sort of been the two big ones so I don't think any surpris is there even though actually I said no surprises there but if we look here you can see that the style components is the the top one here so let's look at retention oh you can see ret I didn't notice that retention it's actually dropping off quite a bit where CSS modules seems to be the one that's sticking around and that's sort of um you can see that here where this is really dropping off the styled components one where there's a little surge here going on with uh CSS modules so interesting all right other tools so p and post pre and pro post pre and post processors um so as you'd expect SAS is still up there it's still being used this is um just on you regularly use and it's being regularly used by uh about 50% of the people who answered the survey uh which is you know people are always asking is it still relevant especially with the Advent of all the new stuff coming to Native CSS and first we have to wait for browser support to increase on a lot of those but yes I still think it is relevant there's a lot of other stuff you can do as well um post CSS as you'd expect is is strong um and then a lot of no answers and none because that's basically what most people are using so the the CSS us usage um one thing that's a little bit disappointing for me here is on the testing environments first like where um where do you test and everyone's just saying desktop which again you're working on a desktop so of course you're going to test there uh but then like that's a huge drop off everybody has a phone test at least on your own phone you probably have a friend who has a phone if you have an iPhone your friend has a Android and vice versa so like test on phones even if you can't test on every phone should test your stuff on phones um tablets obviously uh you know again I guess not as many of us have them but it would be good to test on them uh I'm also really surprised that congrats everybody who's testing on a feature phone like why would testing on desktop with keyboard only uh be lower than a feature phone if if you have a desktop you have a keyboard just use your site without using your mouse and see if it works it takes not very long um and it doesn't it doesn't surprise me that screen reader is so low just because uh they're hard to use they they have a learning curve there's different screen readers that are optimal for different browsers um so it doesn't surprise me it's low it sort of sucks that it's as low as it is um but I would say like that you know and here we have like the testing tools um like well that's a lighthouse it's sort of taking a lot of different things in there um but you know the screen order one there's ways of of getting either people to help you out there but I think it's something we should focus a little bit more on um I'm not very talented with one I usually try and ask people um or get people to to test things for me that know what they're doing um which is a barrier because you might not be able to pay for services that can do something like that but um something to think about but like this you could definitely do just use your try and use your site with a keyboard and see how it goes this is the CSS versus JavaScript balance um this one's kind of interesting let's actually do this one the more this way uh the more people are writing JavaScript and the more uh going that way then it's more writing CSS so basically no one only writes CSS uh most people don't only write JavaScript and then of course we have like the sort of a balance in the middle that ranges more heavily towards JavaScript which I don't think is a surprise browser incompatibilities existing features you have difficulty using or avoid because of a lack of support or a difference between browsers so most people didn't answer but has nesting container query subgrid all at the top um scroll baller styling I get it you can still do it um you know Firefox has its own but it's not that bad it's a it's annoying to style but um at property definitely get that the range queries Cascade all that makes sense missing features animate Auto there is stuff in the works for that I actually I did a video I'll put a card there somewhere um talking about how there's a trick to do this uh that we can currently use but there there's some talk on stuff um to do on there Mason lout 100% agree uh it's on the way sort of um now that sub Grid's here there's no reason that browsers can't start getting that going visually need of support for visually hidden I agree there should be an option for that more suit elements 100% agree should always have more you can never have enough suito elements uh grid line styling that's interesting uh because we actually can style if you use CSS columns you get like a that's where the Gap property actually came from you could actually style that Gap you could put like dotted lines you know like a border or a line or whatever down it um so people asking for that for grid lines that's a really good point that' be pretty cool the main pain points for CSS browser compatibility of course is always at the top but anybody complaining about that doesn't know about the old days I mean we can still complain I agree though I think the big problem now with browser compatibility is there's so many new features coming to CSS and they're not all immediately available to use in production is just frustrating um because honestly for the mo there there's always going to be some inconsistencies there's like this random little thing in Safari that doesn't work well or there'll be something something in fire whatever there's like those little annoying things that are really hard to fix I get it um but at least like there is an overall consistency these days and like the interlope is a really nice thing that's helping browsers stay more consistent as well uh form element styling I get that everything else here is more you know scope responsive design and and all of that stuff that you'd sort of expect interesting actually here so we're in the resources section now the blogs and magazines CSS tricks is still at the top uh it's kind of dead so I'm curious like over time if that's going to change because you're not reading it anymore um which is a shame uh I'm actually surprised that Smashing Magazine is so low a lot of good ones down here guys modern CSS Solutions U that's from Stephanie Eckles is a great resource CSS in real life is fantastic um CSS weekly is awesome um so yeah definitely check out some of those um if you don't know them just like come down here and like click on these and and find the ones you like there's some really good ones so a lot of people ask me about podcasts and if I have any recommendations like here is the the list of podcasts to listen to basically um right syntax um and actually shop talk show I would have thought would be higher to be honest with you um CSS podcast 100% um but like just come through here and open them up and and there's you know this is such a great list of podcasts so uh come through here and check them out I think the big web show is dead um but other than that that's probably why there's so few that are answering on that one um but yeah if you want to listen to a web development related podcast here is a great list to start from thank you everybody we're in the people section uh I do appreciate that very much um people you read follow or just want to highlight so yes thank you very much uh other names on here do not surprise me at all um let me just go down and see what's going on in here and actually I'm sorry Jay's so low uh to be honest with you Jay puts out so much awesome stuff I get why I'm here just because I've become sort of a face I'm on YouTube and and all of that so people know me um but like lots of the people that I learn everything from are are on this list and people ask me how I get good at this I follow these people uh on Twitter or on whatever you know social media um and everything so this is just like the list a good list of people to follow uh in general that are putting out some really amazing content um oh and look we have like the mastadons and everything on here what are the ones that are blank I'm curious what they planned for that didn't get filled out on here so yeah to be at the top of a list with all of these amazing people just makes me feel very nice but also uh you know I'm humbled by it a little bit uh yeah thank you guys I appreciate it uh so yeah thank you oh this one's fun I love this the award section so we have to things that sted this year most adopted feature awarded to the feature with the largest year-over-year I'm going to say has yes all right the most commented feature which received the most comments oh I have no idea what's the most commented feature container queries oh subgrade oh wow okay uh no other feature came close to generating as much fud oh container queries a second but wow that's a big difference I guess it was people complaining that it's been years that Firefox has supported it and no one else has but it's Safari and it's coming to Chrome we're going to have subgrid it's it's finally finally happening highest retention would it be Tailwind oh open I saw that um and then we have most write-ins the most written in answer I have no idea oh Panda what was Panda for panda panda was one of the CSS and JS Solutions so yeah there we go and so yeah there there it is we're at the the conclusion I won't read through it now but I just want to say that uh you know go and dive in check out the results I find there's some really interesting stuff in here and I'll be back next year to both look at the survey and and I'd love to know your thoughts on the current state of CSS so please leave them down in the description below and with that I would really like to thank my neers of awesome Andrew James Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your cor of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 57,495

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, state of css, css features, tailwind, css-in-js, css opinions

Id: EC-ocX6lWNs

Length: 18min 24sec (1104 seconds)

Published: Fri Sep 01 2023