The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage

And, again, I think some of these frameworks are getting better at CSS.

That's something that rid. I do miss in Svelte occasionally as being able to do straight up JavaScript to maybe loops and stuff since we're not using Sass, we're using post CSS.

But most of the time, you wanna pass props into CSS or the types of things you do with,

you know what you know what's reactive.

Like, what benefit CSS and JS would bring to Svelte because rid You know, 10 years ago, it was my favorite thing to work on. And You know? There are things that bug me about it. Yeah. Grid tools weren't very good.

rid Styles with SSR and everything like that without the babble component if I'm using a babble less world.

It means good. If boon means good, I mean to say it's good.

if you don't need a strategy for scoping, you don't need rid CSS and JS, really, there are some cool benefits like being able to do of every single year kind of month by month Starting at 1970,

Rid. That's that and that's not, like, a huge component, but that's definitely a component.

Rid Vue does CSS really well with scope styles. To mention that. SvelteKit does super well with scope styles. I couldn't even tell you, implanted itself into the web at this point. I think we've reached a point where a bootstrap is forever embedded What what's interesting about this is even awareness. Now we've gotten to the point where foundation is so rid The timeline of the 19 seventies heavyweight boxing division. And I find this to be so fascinating because it covers a lot of really famous names, hack arounds. Let me style the gutter. Let me style the

rid Was a JavaScript framework, people would be losing their mind because Next year, give us a vote

JavaScript.

At the end of the day, it's really just a strategy for scoping.

Yeah. I do think that's that's definitely some of it. You know, the CSS and JS 2 and Underlook part of it was like some of these tools, like rid. Styled components, they had, like, a Babel component to them, and people are moving away from Babel. And now you're, like, stuck in a situation where, like, well, what do I do? I can't get my

Rid. CSS variables. Change a variable

A massive down here at the very bottom of the list is, 290 respondents responded with Stylus, which is it brings me great sadness because Stylus was really the best, and I miss it so much all the time. It's actually shocking that Stylus is so well, it's not shocking given

a misunderstood aspect of CSS and JS

computed it's kind of like

Architecture As well as a lot of these CSS frameworks are also component libraries, I think if we had it, it would be like not necessarily like a whole unless it's, like, entirely just an iOS app, but it's almost always a website that people can use to log in to.

the grid lines are not an element, though. So how would you

The grid column on it. But, yeah, it would

Now So,

still being the highest. I don't ever see that changing. That feels like that's always going to be the highest pinpoint.

and

that. Yeah. A gutter background or something? That'd be cool. I mean, I think about it like,

to do that without those,

whenever.

I would just my kids often.

Let's make it easier. Right? The dev tools are considerably worse than both Firefox and Chrome, which makes it a hard sell. Mhmm. And I I use Safari somewhat frequently, Especially because I've been working a lot in Tori. The dev tools are in Safari, the dev tools, so I've been really in that headspace lately.

overlap them. Right.

You use what's on that board, and that almost entirely is built rid in web tech,

Number 2 being the form element styling. Yes. Form elements

You know, you have those grid tools in Chrome and in Firefox. Yeah. You if you click on the grid, you get those really nice grid lines and the the dashed, rid backgrounds for the co for the the gutters and everything like that, hey.

Rid in that sort of same way. I know they're just doing it with divs and hacking around it, but it'd be really cool It's just straight up CSS variables. They call it subatomic styles because you're not dealing with classes here. You're dealing with CSS variables,

have never not been a pain to style. I I'm still doing, You know, CSS hacks to get fancy looking toggle switches. Come on. What year is this year? We love toggle switches.

specific,

squiggles,

Visually hidden content.

rid More powerful grid tools. It's not something I had thought about, but it's something I would use. Definitely.

you can't

That could make laying out things really nice and easy and and just, like, really take us into most of which are over 3 hours long, spend more time

More pseudo elements, having more than 2 pseudo elements per element.

thing, but I'm sure there's some good use cases. Here's a fun one. Number 9 on the list, Wes, is something that we just Talked about support for visually hidden content. Oh. We talked about that in our episode.

Like, what else, though? I don't I don't know. I I don't know if I've I've run into that pain point, I suppose. Maybe it's like a like a path of usage world we've hit with CSS frameworks where It's, like, the most mature

Maybe we could have 4.

column line. Mhmm.

You can't control any of the SVG parts of it, right? You can't say the color or anything like that. So I had to inline it and use CSS variables to change the colors on it so rid. You could see that.

Yeah. If you want to, like, border left,

This to me is something that I've Before before? Yeah. I've actually would love this, but it does feel a little bit like a cold smell to me. At the same time, I would absolutely use this, and I would like this. So, I can't hate on it. Yeah. Before and after are so handy when it's rid Purely Polypane got a, you know, got a usage percentage here, Yeah. Okay. Let's go into the awards,

elements because it can get a little hairy if you just wanna style a specific with that type of thing. But, reforming of things, and I rewrote it using a CLAMP statement.

I need to be able to control the height, the width, the color, all of that stuff with it. Right. So, like, I had a couple of options, which is like I could inline them.

Right now, you gotta use a class with a bunch of, like, a very hacky pinpoint of way of doing that. It's a accessibility thing, so you gotta have it. But, like, hey. Just get us that. That'd be cool.

This is a

but instead of just classes,

essential tools here. Let's face it. But Yeah. Yeah. Yeah.

reaction to that, but it's interesting.

that's kind of interesting.

calculates specificity. I don't need to do that typically, but the, the code quality check is interesting. The analyze the across the board. Yeah. There's an interesting stuff inside of this.

That I see. It's kind of it looks

everybody will look at that and be like, what? The syntax is pretty gnarly.

For color distribution

parenthesis.

So $5 set from AliExpress.

rid. CSS that scales as your website grows. Okay. This feels like a CSS Subgrid.

framework.

like, these aren't

the Tailwind stuff where you can generate it on demand, right? Like There's not going to be a class for absolutely every single thing. So in this case, it says there's a class called BGC

Code quality check

it's interesting.

So I bet there would be a a pretty, big close 4th.

similar to like the And sometimes 2 ain't enough.

You pass it a hex code and put a dot five on the end, and that will basically take that hex code and give it 50% opacity.

so many It was obviously Bootstrap, and, obviously, that there was a a huge pushback on that because it was so ubiquitous all over the web. But I I will credit Bootstrap with being the very first technology

What about some of these other ones on here? You know, an interesting option is foundation

you know, interest in foundation A lot of people are writing Rid. Yeah.

has gone down year over year over year, rid usage of foundation year over year over year, retention.

And of Tailwind, highest used framework?

like the little radar animation in the back of the button. I remember that just blowing my mind. That was the coolest thing ever, but

is, It's pretty low across the board with styled components really being the main one. And and CSS modules to me is so surprising at 44% It's a it's a massive good thing for CSS writers, not to have to bring in a library just to get, rid you know, reactive variables across their entire

I'm just like, ugh. You know? And I feel

separate. Right.

and I I have seen of these back ends are using the same exact properties now. Yeah. And it could be like a symptom of tailwind or whatever, But there is a specific aesthetic that I can pinpoint immediately as using a certain set of tools

it's just come to a point now where I'm like, oh, this is going to this app is probably not going to be very good, you know.

So we're starting to see like tailwind, tailwind UI. That's the What it looks like and how you write the code are Someone on Twitter was saying, like,

and I think that's because it's been slapped on so many

design website, But if I wish I could just use them as a background image. But then as soon as their background image,

the way that you author CSS

rid In whether, like

don't make all the websites look the same. Yeah. Although I will say, I think there is a bit of this this

Websites I would have never in a 1000000 years guessed to be Tailwind looked like Tailwind, so or be Tailwind at the end of the day. So I think that there is, like, a A subset of that same boost stratification with tailwind sites because it some of the defaults are are, you know, ubiquitous. Yeah. But Colors and whatnot. The same same thing. Good developers will be able to to make anything look unique and awesome.

have made a filterable

margin. It's a way to add padding. It's a way to change the text size on an element.

So I feel like we're in a pretty good space

And that's what like a tailwind would be, right? Like it's just a way to write

I I I like tools like that, and I'm glad to see open props on here. Yeah. Maybe we should explain for people listening, like the differences between the 2, because at the first level, there is just a way to write your CSS,

Building accessible, get some really nice adaptive layouts. 41% of people are happy with the state of CSS. 15%,

if you let me filter self directed

Filter for Canada. You know? fairly well balanced. It's about 10% that is as powerful and as flexible as CSS. Certainly, there's lots of things that I'd like to be easier and better, but Emotion, enough to make the survey, but people had talked about it. I'm gonna say lightning as well.

distinction here where we're hitting. Some of these things are UI frameworks with CSS and CSS as a part of that. Other of them, like, that's, like, full kit and caboodle here. You got the UI and you got the CSS. Other ones, You have UI things like maybe like Shoelace, which is a web component for or web component library for UI elements. Right? No CSS involved rid Other than the bare bones to make it work, you bring your own CSS.

multi select drop down And I would probably attribute that to everything.

And then you have a 2nd layer, which is like a UI component

Like every time I go to a website and I need to

And then you have things like open props, where open props, from Adam Argyle is on this list for the is it on yeah. It's on this list for the 1st time, and I really like open props. I end up using this all the time because a long time ago. So I I love it. It's so good. Rid Resources kinda interesting.

that's so much better. Rid. That was a hard thing to implement, but not now that we have these UI libraries where they

that I have to pick Canada out, it's oh, it's okay. I know I know to hit rid See button 3 times, and I hit Canada. But I indent like,

UI, it's what it looks like. You know, like these are prebuilt things. And then the 3rd level of that is like, oh, Yeah. This one is really exciting, browser incompatibilities.

They're much better. Yeah. And then and then there's kind of a weird,

With the flag beside every country, it's a little bit easier, right? It's a little bit nicer. So every time I hit that, I'm like, oh, good. I'm glad that these things are getting easier because as a user of websites.

meaning that but that's that seems odd that that many people are are, miffed about scroll bars rid. Scroll bar styling.

variables and things like that.

rid. Amazing UI. And I don't think that there's any other

Rid Videos and screencasts, Nick,

rid. Grid and Flexbox it's probably been, like, 6 years since I like, my own website still my course website still uses Foundation for a little bit of layout stuff. Wow. That's just rid. It needs to be ripped out. But the other thing like, that's why Bootstrap

a CSS

with

it's been on such a wonderful trajectory.

I think that it's probably not as as flexible and as easy as this type of thing. CSS

10 years ago, Scott, that CSS would look the way it has now, it's, like, not even rid It's, like, hardly even the same tech as far as layouts go and And they are the timeline of heavyweight boxing.

the best it's ever been. Mhmm. It is shockingly good now.

Like, show me literally any any other

rid Doing video screencasts,

layouts.

I I think I'm pretty happy, especially, like,

Stan,

The way people learn

So I I would have responded to this very happy because to me, I don't think they were on the is this year over year? Yeah. It should be year over year retention.

is by far the biggest.

UI but why would you even need that? Totally.

is viewport units. I could see container queries. Yeah. We're using them. I started using them this year,

responsive design.

We've got the tech to build rid,

We we didn't even send people that way. Next year, we gotta we gotta pump that up. Pump pump pump pump it up.

very happy.

CSS is the worst layout engines ever. And I was like, bro, rid No. Paul No. Please. Show me Holy.

just to get that perf benefit, that battery life benefit. You know what kills me is

hit us up at syntax.fm an outrageous amount of adaptive layouts with CSS rid. Grid. And 2,

Kinda strict on some stuff. But, 2, if you're on an m Yeah. That's how we used to work.

do you remember those commercials? I don't wanna say variables, but maybe I'll say variables just because. Yeah. I It's mainstream. Like, variables is like, I saw it. It was at, like, 94%

or somewhere I don't have access to plug my computer in, I'll dev primarily in Safari flipped the script on everybody using this stuff. It has been like a

about the pizza has some kind of an edge, and it was like kids rid Being like, I've been to the edge and back. I have no idea why that just came up in my brain, but, hey, it's there. Safari, 18%. Yeah. Safari is a decent development experience. Is it the best? No. But hit something that's really good about developing on Safari, one, you catch bugs pretty early because Safari's

Edge folks, if you're out there using Edge as your primary browser, You had the hero. You had the the header.

What's up with that? So I'm interested in in those of you who are 23% edge users. What what is edge giving you that Chrome isn't? What edge is it giving you? What's, what what what's the edge app? What edge are you getting in? Have they been to the edge and back? Let's get to the part of the show where we talk about sick picks. Sick picks are things that we pick that are sick, things that we enjoy, like, or anything.

on x or Twitter, whatever you call it. I wanna know as well.

Am I speaking into an empty void there? No. I I don't know. There's, like, some pizza commercials from the nineties

Why? What does what does Edge give you? I've seen Edge install some kind of bloatware Blaze UI, From CSS entirely, animate to auto was number 1 hun number 1. Yeah.

It is just Chrome at the end of the day.

And dynamic small, large, and dynamic

runner-up,

Rid 531 Bootstrap went up. Just just a rounding error. Probably not anything significant. That, at this point, is has felt like rid Rid. And I'm surprised. I'm

Has. I'm gonna say has again because we know has.

Yeah. I'm gonna say has.

A con. Alright. Most commented feature, a word to the most feature that, feature that received the most comments, left and right. Why put a limit on love here? Let's let's go as much as we can. I'll build my whole website out of, befores.

You're liars. It's not even supported. Container queries, productivity bend and manipulate tailwind to look like anything,

So

and,

your UI

It's been used the most for a long time. I do wanna point out, though, that,

the rid. They're often same with, like, material. Every time I see a material

what are other developers using, what are the new features that people which industries do you work in? So a more expensive set that has a cobalt or a diamond tip edge.

and retention has gone down Slight disclaimer, even though, like, And

You gotta take action on your lines of code, crashes, busted API calls, rid Stuff's going wrong with your app. Sentry helps you figure out what went wrong and how to fix it. Check it out. Century. Io. Alright. Let's Dive in with the first one here, which is CSS I'm starting to see that in a lot of new Frameworks come out. They it's like, we will give you some CSS if you want it, but you drive through and they show you your order total. I saw the rid day that the McDonald's

of retention over time is 75% Rid Yeah. Before after, rid. An Ios app, you know, but

frameworks, packed into each other It's like

have used over time.

just putting it out there. Okay? But other than that, rid. You know, I'm on, narcotics. I'm feeling decent, when compared to maybe

just trying to get through it is is how I'm feeling. Right on. Rid. Syntax is brought to you by Sentry.

It's kind of interesting. I think very clearly On the job training about the same. So people are either they make this will be at least 1200

I will,

sort of like a starter.

speaking with a retainer. I'm going to do my best To not make weird mouth noises or be obnoxious,

This is actually kind of interesting.

and Tailwind is killing it on 5, 6, 7 years ago put them in a grid and just say, you know what? Here's how big you are.

I had dental surgery.

different UI frameworks that you can use to build That means that most people are working for,

winner here is happy, very happy, or neutral. So I feel like that

46% CSS framework, CSS and JS I don't know. That's a bit of a tweet us because I can't think of anything right now past that one wiggly, you know, like, it was in there, but, like, it didn't have, like, a perfect fit. And there's a little bit of wiggle in it. And when you put a put a hanger on it, it wiggled a little bit and

My name is Wes Bosma, developer from Canada. With me as always is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good.

walls.

And I bet that it's going to be extremely popular in the next year. I I like lightning. I think it's cool. I think it's, nice and easy. Definitely has an a knack for making things easy to use, and Yeah. You gotta love tools like that. Rid I haven't heard of some of these. Project Wallace. That sounds

does all that good stuff. So if you've got some future CSS that you need to use, Lightning CSS

ems, rems, and it will allow you to

and much more in a single web app. Oh, that's cool. It'll tell you

Let's see what that is. The best CSS analyzer out there. Project walls is a set of CSS analyzers that check Complexity, specificity, performance, design tokens, style how do you even say this? 20% of people maintenance, file organization, dead code elimination, refactoring, etcetera.

to using post CSS. You can use them together, but it parses,

colors is nice because like

alternative rid to be used. You know, like, if you if you have a value of padding 10 p x and you divide that by 2 and then add 1 pixel, then it would just rid. Update it and then re render where that variable was used on the page. Like, that's amazing that CSS variables are reactive.

the different font families? How many colors? The just wherever the text is. So Okay. Bender prefixes that are different heights.

very unusual with 30 people rid. Responding about project Obviously, Bootstrap.

use the color picker to match it as close as possible.

And then before you know it, your colors don't look consistent across people use in from their day to day, like a FreshBooks or something.

is the one for you. It's made by Devin,

How many times have you used pixels,

bet

Java, CSS, and JavaScript balance. How do you divide your time between writing CSS

Write JavaScript It scopes your styles rid to a component.

And to me, this is more of what features can't you wait until you can use? rid I don't know. So in the syntax website, in the trend the new transcript layout, the JavaScript as well that allow you to build things like interactive drop downs or modal pop ups or filter lists or all of that stuff. So There's kind of 3 levels to this type of stuff. Yeah, totally. How happy are you with the state of CSS frameworks?

more JavaScript And so this really fits into that alley. I I found What about grid line styling? This is actually something that I would love as well, being able to style the lines on a grid rather than StyleLint

10 years ago. Mhmm. Because I think 10 years ago, these numbers would be very, rid Very far skewed to CSS being a thing that people were writing more. I mean, at the time, people just weren't writing as much JavaScript straight up. Yeah.

rid Most people have no the yeah.

than CSS according to this. That makes sense. Although, More power to you, panda panda people, but,

This is interesting that

60% of the time.

In all of them, except for

and JavaScript code? Yeah. Man, that can be just done in CSS variables. I think CSS variables has completely

That's some of the criticism of these surveys. Sometimes you're like, what does that even mean? But I look at that and I say, all right, I'm assuming, like startups, the dotted lines.

So it would be something that's not popular B, I think some people have hit Lots of perf issues with that type of thing. And see, I think a huge part of the industry is going over to utility class based stuff. So rid. They realize,

Rid. 3, 2, 1.

lightning CSS.

I'm just open props. Yeah. Yeah. Most write ins awarded to the item with the most Write in answers. Scott Talinsky. No. I'm gonna say

No. We haven't.

I know it's probably gonna be wrong. Joseph.

for

copy and pasted Bootstrap.

Back end engineers and developers who are not UI people to make nice looking UIs

And because of that, it majorly took hold even maybe in places it wasn't supposed to be used. And at that point, it was Twitter Bootstrap. It was A Twitter project, and now it's just Bootstrap. It's in version 5.3.

And you know what?

that made it effortless variables. Right? Yeah. There's only 1, like, time I wish I had looping.

when every single new project that came out

But, like, awareness is, like, pretty much flatlined. So It seems like usage is going up, but maybe, like, they've reached maybe saturation for a full archive of all of our shows, rid And don't forget to subscribe in your podcast player

Essentially, let's take another look here at, CSS pain points. Rid. Browser compatibility Can you think of a a reason? Let me we can already reference rid. SVGs, images, but, like,

tech it is. Probably, like, WordPress is that

was Rid It's doing something a little bit different. I learned something here. What is what is Atomizer? Create small reusable It it it was always the worst of the the preprocessor

that looks nice. It looks nice. Yeah. It looks much nicer than it did before. I mean, I remember There for for people who are newer to the web, there was a time If you if you that sounds interesting. If you if you're the type of person where that sounds interesting to you, You're gonna really like it because it it's super well done.

I'm not reaching for it, But that doesn't mean that it's not a a very powerful and and great tool today. Yeah. I think that's kinda interesting where Sonny Liston and these, like, big names in sports. But it it, like, covers a timeline through the set of the most important fights Oh my gosh. If you do Panda UI, there's, like, 800 different libraries called Panda

incredibly easy.

into the web, and no matter what we do, it will be here forever. When was the last time you went to Bootstrap's website, Wes? That is a good question. Not in a while. Oh,

a bootstrap,

crazy thing it is, a stylistic thing. You know? Using Lightning CSS, I

it's like the industry is supporting itself. Right? Like, where Well, not really. Like if you think about if you think about literally any industry. So, the McDonald's

Industry sector,

that people use

The people that are using to run that business. You know? But isn't that industry

Yeah.

Unfortunately, this this one, I don't think they had data from

not startups, but basic companies that build a piece of software it's kind of like a timeline, right? And the timeline follows you around. And Basically, when we get to a new heading, we squiggle out to the left. You have the heading, you squiggle back. Right. So I had to make these little SVG because Oh, it sucks. I've done that. Conversion life process.

probably somebody who's working in the industry. Right? Yeah.

No matter what industry you go into, there is some sort of web app that Pandadashcss.com.

Rid CSS usage,

previous years,

somebody tweeted a photo of the McDonald's order saying like, showing the Chrome broken page. And I was like, the freaking McDonald's

They are probably building that. At least part of it, half cooked apps over the years,

rid. An application that Rid What do you think the most used CSS framework? Obviously, people are interested and use keep continuing to use Tailwind by far the most. But what do you think is actually the highestly You want to just pack them in like, the it was kind of, like, PostCSS,

they are building it in web tech. If not like the actual board itself not being built in HTML and CSS, it is. There certainly is a UI that people use to update a fifty-fifty split with a slightly higher eek rid towards writing more JavaScript than CSS, which I would say is fair for my own development as well. I'd say it's fair too. I think it's rid Interesting figuring it out themselves by Googling or of interest. You know what about usage? ecommerce and retail are the 3 biggest ones. So you're you're either working for Rid Really? Yeah. I know. I feel like we have a pretty good handle on it. Like, it's hard. Like, maybe maybe, yeah, it it can be a pain. To lunch. Sure. You have the tools. You gotta do the work, though. I gotta say, Wes, I rewrote

the largest amount is programming and technical tools.

You're either a consultant who works on all kinds of stuff or you're building like

they use some service rid Yeah. Yeah. Like Yeah. You're right. Like bored smart TM or some BS like that. You know? And whatever

And then it just does not Feel good to me to use. I don't get that either. It I I many times, I've gone back to CSS modules and be like, are like obviously they can be anything. But with something like Bootstrap,

rid Programming and technology is number People that you've heard of, people that you you know things about, like, you know, And right now, hey, we don't have some rid Some little things, but we have, like, many of the things that we would have loved So, like, why not just use Chrome? Safari,

most people are using it professionally instead of as a hobby or as a student, Highest retention,

so it's not like you can see over time. I think one of the most interesting things to see over time would have been the crypto one over time to see with that numb where that number went. Yeah. Interesting.

I'll let you pick out an interesting one, but I thought this was pretty cool.

It it is interesting to see

Which makes sense if you're the type of person filling out a survey on CSS,

classes.

I was hanging up a closet bar the other day, and I wanted to

like, which is which is sad because when it came out, I remember the clicking a button and the little, like, the background just went And if you're cutting through tile or you're, like, you're drilling more than

on YouTube, and I like long videos that I can watch to fall asleep too.

3 holes a year, yeah, maybe you wanna get rid all of our trucks so that all of the Different trailers work with all the different trucks. Like, they're all interchangeable, Transforms, bundles, minifies for both how to write your CSS as well as CSS features. One thing we didn't talk about, which is values underneath the heading. And like, maybe I don't know what it's like to build food? I wouldn't think so because, like, You would work for a like, I guess if you work for McDonald's. But what I'm betting is that they foundation, Bootstrap were big ones.

and you feel the the gravity of what these big fights mean and their outcomes. And, they don't spend, like, an outrageous amount of time on each Each fight or anything like that, it's just like, here here's the background.

But I'm I'm here drilling through, And I had to I just had to add divs rid and style them how I wanted it. And then you explicitly

rid If you need to drill a hole in something and you don't know necessarily what size it is, going through, like, a 1000000 drill bits is really refreshing. And if you're drilling through something really all of that sorta hard parts as well? So Yeah. Una and Adam, way

And, like, you really get a handle on both Social cultural things that are going on around the time, the the story lines, these huge names, and and, like, what what exactly the the context for all of this stuff is, CSS and JS.

A YouTube this channel has I don't know how many videos they have. It looks like they don't have that many,

I don't know if this tool is for me, but it looks cool. Yeah. It looks a little syntax is a little bit intense. Bit verbose. Bit verbose. Indeed. Alright. Hey.

they were metal things. So I just went down to my workshop And I

and you can also get, like, a little eye hooks for them as well. But, basically, You can get the cheap ones. They are fantastic.

and we have lots of trailers, And the frustrating part is that we we have it with CSS resources

So I've been I've just been drilling holes in all of our use?

Home Depot, Amazon, Sometimes you can drift

I'm almost all the way through It's the 19 7 I'm almost all the way through this one, which, shows you how good it is. I'm sick picking. I haven't even finished it, you know, nearly 4 hours, but it's

I have I've never been into boxing ever in my entire life. It's one of the sports I have a huge blind spot on. I just don't even think about boxing that much. But I'm a history guy. I like watching history stuff. I like watching documentaries

goes again goes with what I'm saying. Yeah. So this is a way to write CSS

Oh, this is a cool website too. They also have a cute panel logo. I guess that,

grabbed a step bit and I drilled a tiny little hole, and then I kind of just put a screw in through that hole. It's kind of like a set screw, right?

or drop a review if you like this show.

And so the one I'm I'm

a a set of step drill bits.

I love how cheap some stuff like that is. Right? Yeah. I'm always surprised that little, like, Bits and bobs in in the tool space, how how cheap they can be. Yeah. Like, you can certainly firmly I think is really interesting is if you go to usage in CSS and JS before we get of this topic in general. Yeah.

it's often easier to start small and progressively

They have really expensive ones,

literally anything. Often what is the case is I I had to do that the other day when I was I was showing how to rid. Get equal columns in CSS Grid, and I had to overlay literally anywhere that variable is used or, Figure it out. Word.

incrementally drill larger and larger holes tricky UI really easy.

5, $10 for a set of 3.

and maybe they do.

They are so Dang handy.

but the trucks and trailers don't all have the same rid hook up.

obviously, Muhammad Ali and, Yeah. I guess so. It's fairly

I'm gonna stick pick a specific video and maybe even a specific set of videos here. I'll I'll stick pick the whole playlist.

AliExpress ones, they're all the same. They fit right into your they chuck right into your impact.

UI.

But for most of us homeowners out here, just get yourself a cheap set of in your Svelte. Right? You're right. You you could just inject me from doing that. You could just inject like, A style tag is a dom element, so you can put CSS in there. I don't know what that there's probably some sort of downside to that, but I think it would work. It's doable. Yeah. I think it's doable. Yeah. You know, one thing I I, most people are doing And we're going to go into a lot of the time, probably 87% read To author your CSS,

kind of inline.

going all the way to 1979.

This is one frustrating

Head on over to syntax.fm must ship to Have browsers. If you were asking me this right now, I might be able to come up with 5, but there's a good chance I would fail that. Because,

rid.

I'm going to sick pick a

issue we have with my kids is that we have lots of trucks

Here's why it happened. Here's why it's important. Here is the outcome. Let's go to the next one. And they show the original posters from the seventies and stuff.

through wood, metal, plastic, whatever it is. And

I've been going nuts on this thing, so check it out. Awesome. Alright. That's it for today. Thanks, everybody, for tuning in. We'll rid Catch you later. Peace.

11 gauge steel with a everything column 1, then everything column 2. People want Column 9 or sorry. 20% of people are writing And the way that it looks tool for laying things out big company.

Rid. Westland, do you got a sick pick for us today? I'm going to sick pick

And rid Firefox is so Chrome's 81, and Firefox is

make it larger. So step drill bits, they look like a Christmas tree,

just in time utility rid This would be so much better with a lube, but yeah. Hey. That's it. One time in my entire code base is not that bad. And and, honestly, rid. You could just put a style tag in your Type safe in the browser itself.

Just good to go. I highly recommend you get a set. Nice.

This seems very CSS and JS. Yeah. It is. It's CSS and JS.

This is a good website, and they got a cute little Panda logo, which your tool's name, Panda, it's gotta have a cute little Panda logo. Oh, no. I'm on a different website for Panda.

I've been drilling holes in all of my workout equipment and

it's it's at the top of the screen, and then your content moves down from there. Yeah. That's a, rid

for many different reasons, but it's a really wonderful

the Safari console is stuck to the bottom instead of

browser, I was a

Frequently in development all the time

I have to type in stuff into my console at very bottom of my screen, and that drives me nuts. Yeah. You could move it, though. How? You can move it to the side. No. I mean, like Like, when you're when you're in a cloud, it's kinda like terminal. What you're saying. If you're typing LS on terminal, Panda. What's Panda? Did we talk about Panda? online courses, whatnot. View source, also very popular as well. You learn I learn a lot from that type of thing. Yeah. Hey. Podcast number 1, Syntax. Woo.

and Rid. Has. Nobody. You come on a bunch of liars.

rid. Shout out to Polly Payne. Going into the next section here is CSS usage.

I like Polypane. I probably wouldn't use it as my primary tool because it can be a bit much with all of the different window. Like but I will use Polypane Man, Pure CSS has existed for a while.

not something you would use to browse the web with. But as a tool, it's a a really excellent tool. So

It's a oopsie daisy to me. It's probably in in I should try Safari again. I remember trying it, like, a a year ago, and I was like, this If it if you give me a drop down Rid. Most people are either who is also the author of Parcel.

by default,

But, yeah, it's it's not lovely. I do see, in terms of, like, who's picking it up. Although, And that's personally how I prefer to work.

Developer based

users.

Say bootstrap. Tailwind.

retention rate. I think this might be a mistake, because I don't think they were on the Largest year over

I don't think they were on the thing last year.

Or maybe retention is would use again. That's what that is. Okay. Oh. I used it Yeah. Would use again.

Wow. Nice. 91% the list and select,

technology with the highest retention of returning if you would have told

year. Since this is, from, 2022 to 2023,

usage. So pretty much

21.

killing the tech YouTube game right now. Yeah. Totally.

Ready? 3, 2, 1.

not most adopted feature.

scroll snap. No.

And we could do our our little,

everybody's using it. But that's why it hasn't jumped that much since last year. Probably Vite tool or whatever Yeah, that certainly is getting a lot better

anything. But, rid. Good to see Kevin Powell up. He's killing it on YouTube, though. I see a lot of his stuff pop up all the time. We should have him on talk about that. Rid There's quite a few of the stuff, so I should look it up. Oh, yeah. Definitely check it out. I think Kevin Powell and, Fire Ship rid are

that's just the,

Aspect ratio. Aspect ratio.

below me, so

I'm going to go with

So feature. This is CSS feature. What's the most adopted feature,

With the actual CSS that goes in it, obviously style components being the most popular one,

CSS can be done with CSS variables, and it's not necessary.

CSS in JS, rid. Functions.

Into rid You know what? Like, it's not something you can really transpile because the scroll bars are different, and a couple other pieces. So like this is this is a problem with logos as well as people just

as a way to author and tightly couple your You know what did go up? CSS space. Yeah. Exactly. I I tweeted out the other day. I was like, if CSS It makes me feel like this app is going to be crappy,

CSS modules, all of that. Seems like they're all on a downward slide.

A people are just using regular CSS, weird ones out there. I think it's mask has to still be webkit mask.

a lot of the getting values from JavaScript layouts

to my elements.

oh, I don't even need any of this stuff. I just need to be able to add classes is is really good. Rid. Right. I feel like that's much better than previous years. Only 5% of people are unhappy.

A couple things.

it got it, it sort of blew up in the survey next year Lightning CSS is sort of an But there are some things that pop up. Yeah.

Interesting.

do you really need to do that? That's always I like Oh, I always stop my crowbars.

Missing features, what do you feel like is missing Back in my day, you used to have to go to a website and copy and paste a whole list of prefixes just to get a border radius.

and you get being in here. Yeah. That's bizarre.

Features that you have had difficulties using or avoiding altogether because of lack of support or differences between browsers.

Subgrid,

Yeah. Totally.

And then scroll bar styling. Oh, come on. That's one of that's a progressive enhancement. You could do it in almost every browser,

It's also something that, like,

CSS has coming in at number 1. Everybody is just waiting to be able to do that. CSS nesting, commas. No other feature even claim close to generating as much feedback as subgrid. I think people are like, where is it already? Come on. Yeah. We gotta do a subgrid show Talking about how it works and when you would use it. I think a lot of people don't understand,

photo gallery Yeah.

What's the what what am I missing? A support for s g SVG inside of CSS code such as background, m m one, m two base Mac, whatever,

Pinterest thing. But every now and then you've got 6 things

and one of them spans 2 columns.

columns. You can do that, but if you want it. But then your content goes in CSS.

It's variable content that packs in nicely.

To auto in CSS,

and you want them to

why do we need that?

has some difficulties when CSS can do so many of the things that you would do Sass rid anyways, but let's not discount the amount of people who enforcing things like CSS variables or specific code styles or don't use these certain properties or even some of the better things in it are, like, these videos,

0 styles, I I was recently doing, like, a grid of color boxes, a transition on animation on a position boon for boon is the right word. Right? That means good? Yeah. Yeah. I think so.

be nicely ready. But then I need them to be

Bro, like, it's one of those things that should have just worked from day 1. I get it. It's hard. CSS,

It's nice not to have to explicitly Welcome to syntax. Today, we have the state of CSS now they also come with

like, I could think of, like, a tweet cluster where you just want it all to fit in, right, or something. Rid. But as I guess I think that's it.

Even like pricing pages

tweets,

123, then start again. 123.

a huge amount of time spent would have been saved over the time. Masonry layout is really high, but How many websites We're getting that. Yeah. I get I know we're getting that. But how many websites do you use on a daily basis that have a masonry layout. Me? 0. Absolutely none. When was the last time you opened Pinterest? Never. Who cares? Yeah. So I just don't I don't get who's Who's dying for masonry? But I get its need. Maybe it's useful in, like,

fun thing to set up, but when you get style and set up, and that aesthetic has gotten a bit boring to me. Yeah. You can smell it.

Auto prefixer.

Yeah. It sucks. I've done it. And, you know what? I've done it a number of times because,

it it always offered the least to me. But yet, somehow,

the adoption of Less, but Less to me offered nothing. It offered Less.

I feel bad For for people who chose less as their main processor

people, make CSS Someone who sells stuff online,

when, Yeah.

at number 4, I really like StyleLint. I think it's underutilized.

We need to think about Yeah. They used to be something that you had to copy and paste or even worse right by hand. Yeah. On CSS 3, please. You used to have to go to a website.

initially offered

way ahead, which is amazing because Prettier was initially a JavaScript tool, but it's fantastic for formatting CSS as well.

rid The

That's,

That was a question we had the other day. Like, what are the things that we still need

Luckily for us in in the year 2023, interest in tailwind is high,

Well, I'm not going to do it because I'm going to ask you. Don't research it. Next time we do stump, I'm going to ask you that, like name 5.

utilities used by everybody Prettier of the time, you can get it done

Because Bootstrap SVG and CSS.

with all of the tooling we have, CSS prefixes, thankfully, is not something

I think It's maybe not the most

that takes

to auto prefix. There's, like, a handful of, like, Screens that have the menus on them are built in HTML and CSS and JavaScript. You know, like, how awesome is that? And literally

SaaS was so much better, stylus was better. Pick anything other than less. Rid. Utils, one of the top

rid trying to do it can really be one of those tools Rid You can smell it. That said, people can

it, people just got roped into using Less, and, I mean, with a name like Panda Oh, this is a good website. There's a lot of things named Panda. Yeah. Panda UI. You you Type safe styles. Okay.

code review part of your workflow and makes it into an automated process,

instead of, like, using a translate three d property to do it. Right? Rid. So just being able to understand where you're kind of foot gunning yourself with, you know, potential performance issues or or general code smells. 213

options or post whatever they are. Postprocess rid. I forget which it one it it is in at this point, but, like,

with Close 2. Container queries, close 3rd.

Why is this popular? You know? Yeah. Yeah. And I just can't I can't do it. It's just not for me.

and I had to do, like, nth child 1, nth child 2. That's my intention. Like,

rid. Alright.

because that DX for me of using CSS modules has been DOA since day 1. I I've never been a fan of that workflow. Like, you're importing a class and attaching it. Like, No. You missed me with that one. I I'm surprised that so many people are using that given

I I do really love CSS, so maybe I need to

rid CSS chops here on the, socials and and put out some much better CSS content. Because honestly, some of my best Courses, modern CSS layouts, modern CSS design systems. Some of those courses I've done, I'm really proud of. If you're interested in learning about, You know, CSS layouts with grid and stuff like that. I got some courses on level up dot video for free, so check them out. I I think it is a bit of a popularity contest as well because, Like, certainly, I should not be above or yeah. It does feel like reviews of the awards. Alright. Most adopted feature, which is the largest, rid most adopted feature year over year.

Jen Simmons who literally work on the CSS specs. You know? Like, style JSX, rid Tailwind tool or their

like, pretty close behind it. Consulting services

Here I am talking about it. These people actually spend time trying to figure out

for for that type of thing. Yep. Yeah. Totally. And, West Boss showing up pretty high on the CSS people. I gotta get my numbers up here. I'm on the other answers tab, which is honestly a little depressing considering I I do feel like I rid I,

honing my,

Both of them.

Yeah. I I'm looking at it feeling a little uncomfortable myself, But I you know, I've done a a cursory glance here.

There's some weird perf issues occasionally. Like, for the most part, I really like Firefox, but there's some times where it's it's not quite a of a Man, performance on Safari, battery life on Safari is really good. Sometimes if I'm running off my battery on my Mac And I'm, like, like, on an airport if we would have had the ability to animate

paradise, but it's nice to try different things. I am surprised that Edge is even at 23%.

is that

Not quite Yeah. I get it, but it's it's one of the ones where it's like, rid. Do you really need it? Like, is it how big of a deal? It's not a big deal to me. I I get that it's cool and that it's fun. Yeah. Maybe because it's it's different in all the browsers. So you have to write different code for every browser and people are probably just like, you

86. That's I would think Firefox would be much smaller than that. Really? years of CSS

I think the section on browsers is somewhat interesting. Which browsers do you work Primarily during initial development, it's no surprise that Chrome is number 1 and Firefox is number 2. I'm surprised that

I have a confession to make. I've been using Firefox as my primary browser lately for the past, like, 5 months because I I do that sometimes. I just change the browser that I use for a long period of time. It's a good idea. The and one thing I've noticed about Firefox

I have,

deeply understanding CSS Grid.

the things like clamp and dynamic units and min max, that sort of stuff. There's so many different Fun things there that you can do to avoid just, hey. Let me just set a, media query and and address the values here. You can, Hey.

rid these days, but probably still a pain point. Responsive design there's a reason why some of them are $100, and you can buy a set of 3 for $8.

responsive web design, rid

a

media queries to do some little, I am,

And boy, howdy. I felt great.

Folks, if you want to get better at Having to do borders for

You can do

section of the Syntex website the other day that I had

I would invest your time into that that feels like you're mixing up the the content with the the styles in a way that have been using SaaS for a long time and just as part of their workflow. Yeah. Solid. Thing as Bootstrap. You know? Like, you're not gonna you can't swap out

With media queries, I'd I'd 3

is a pain point for a lot of people.

I I haven't looked at it in a very long time.

is so popular right now is that, like, it probably should be ripped out, but I don't care enough because it's just a grid. It's a grid of things.

Yeah. How do you feel about these kind it's gone down from twenty rid 20. It was at 62% in 2020,

And if I were to spend a day rewriting that to To make it look exactly the same, it's not worth my time. But but when a big redesign comes around, then certainly that thing gets ripped out. Yeah. There's a lot of things on here that I haven't necessarily looked at too much like UIKit, about half of that online courses, about the same.

Not considered that people aren't even aware of it as being a thing. Yeah. There's a whole generation of kids that don't even know what a foundation is. Totally. It it makes sense. It's It's probably Subgrid.

of 2nd tier CSS frameworks? I I guess you'd call them maybe even like lower than that. Yeah, I think it's exciting. I like seeing lots of options,

Pure CSS.

I maybe I shouldn't be surprised because, like, the way I do it is not the way everybody does it. Right? But I rid. The way I do it is the is the only way and the best way.

Which pre or post processor do you regularly

But people don't So if you need to drill a hole in I guarantee Yeah, there's there's still a couple of times I wish I had loops in CSS, but I think for a lot of people that are saying, yeah, I'm still sticking with Sass because I want my loops and and everything like that. You components in your JavaScript framework

They just Rid OpenProbeins.

72% of respondents saying Sass reaction part 2. So we Had gone through it a couple episodes ago. We got went through the 1st hunk of the state of CSS survey.

Do the thing and the CSS works in all of the browsers.

parcel is using post CSS for them.

Let's talk about the next section, which is other tools.

So I bet that's much higher because was surprised to see Sass being much higher than post CSS. Yeah. Yeah. Me too, especially nowadays

that these numbers are much higher in the post CSS regard, Yeah. Yeah. There's a lot of people that that we still

saying post CSS.

necessarily

and 45% rid is awful.

know that they are using

might not know that their

I bet how should CSS grid work? You know, like, Can we get Yeah. Conical gradients in CSS, different way. It's not you're not generating a bunch of classes, but if you sort of take a step back and say, maybe I can rethink how I approach this type of thing, Then you can make that variable part

right? Like they

This is always kind of interesting because we get to Have a little peer into

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.