1035: Why everyone is moving to Stylex?

Meta’s StyleX compiles thousands of styles into a few reusable class names at build time—zero runtime, fully type-safe. Scott and Wes break down why it’s suddenly everywhere, and why it might be the best CSS tool for AI agents. Show Notes 00:00 Welcome to Syntax! Syntax Ep 650 San Francisco Syntax Meetup 02:18 What Is StyleX and How Does It Work? 04:27 The Difference Between StyleX and Other CSS Scoping Methods 06:03 What People Are Saying: StyleX Is Superior for AI Agents Jared Palmer Adam Hutchinson Aiden Bai Syntax Ep 658 11:30 Type Safety and Design System Constraints 12:46 No Runtime Dependency: All Computed at Build Time 13:49 Brought to you by Sentry.io 14:13 Reusable Styles: Import, Export, and Auto-Import 17:53 Composability and Overriding Styles With JavaScript Objects 18:24 It Sucks to Write by Hand 19:25 Modern CSS Properties and Waiting for Implementation 20:58 Nested CSS and Nested Selectors Are Tricky 22:24 Alternatives: Panda CSS and CSS Modules Syntax Ep 807 24:41 The Auto-Complete Experience: Why StyleX Shines for Agents Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  StyleX, everybody's talking about StyleX. We're going to do an episode on it. If you've ever opened up a meta property, Facebook, whatever, you'll see that their classes just have all these random classes on it. And everybody assumes that that's Facebook's own internal version of Tailwind. And that's not the case at all. It's their own way of writing CSS and it's actually pretty smart. We did an episode three years ago on it. Now, everybody is on to it. It's great for agents. There's some pros, the cons. We're going to go into all of it, what people are saying about it, as well as some of the alternative. Let's get on into it. You ready, Scott?

• 0:33Scott Tolinski?

  Oh, I'm, I'm, I'm as ready as I can be, Wes, because honestly, there's a lot, there's a lot about StyleX I find to be fairly grotesque, but I'm, I'm keeping an open mind. This is me keeping an open mind. Folks, you can change and you can keep an open mind, too, because there's nothing that makes me feel more icky than writing CSS inside of a JavaScript object. And today, we're going to be talking about that.

• 0:58Wes Bos?

  We're going to talk about how great it is. Yes.

• 1:00Scott Tolinski?

  Yes. Yeah, but before we get into that, we are going to be doing a meetup in San Francisco, Tuesday, October 27. It might be a spooky meetup, but I don't think it's going to be that spooky. So come on down. We're going to be at the Bear Bottle Beer Garden. If you've come to a Syntax meetup in October, it's at the same place we had it last year. And let me tell you, we had a great time. There was a huge turnout. You can come around, have some beers, have some just sodas or waters or whatever you like to drink.

• 1:32Wes Bos?

  We got, we're going to have swag there. It's going to be sick.

• 1:34Scott Tolinski?

  We're going to have swag. The whole syntax, the entire syntax team, have you, have you been dying to me, producer Randy? He's going to be there. You can say hi. It's going to be sick. So again, Salesforce Park at the Bear Bottle Beer Garden. We will have all of the information in the show notes, as well as a link. You can head to syntax.fm/meetup if you want to get more information. It's going to be a ton of fun and I can't wait.

• 1:59Wes Bos?

  We should also say, even though we're in town for GitHub Universe, this is not part of GitHub Universe. So you don't need a GitHub Universe ticket or anything like that. So you just come as you are.

• 2:08Scott Tolinski?

  Come as you are. Just come and hang out. And it's always a good time.

• 2:18Wes Bos?

  All right, let's talk about StyleX. So StyleX is the way that all meta properties write their CSS. And the way that it works is that you author your styles in kind of similar to how you would write like a CSS selector. And the syntax is significantly different. We'll get into why that is in just a second, but put aside the syntax for a second, because we want to talk about like the pros and cons and all of that type of stuff. So the way that it works is that you write these StyleX selectors and you give it your font size, your line height, your color. They're fully typed. You can share them. You can import and export them. It's all done inside of, inside of JavaScript. And then there is a compilation

• 2:58Wes Bos?

  step, which will essentially turn all of that CSS into these crazy class names. So if you look at any meta property, right, you see like X1I10HFL and like that will correspond to like padding top zero. So the benefit of this is that it will go through all of your styles. You can author them like, like you're used to with regular CSS styles. And then anytime you use padding top zero or margin bottom zero anywhere in your, your application, you might use it like meta probably uses it 300,000 times across all their properties. They can get rid of all of those and simply distill it down into a simple one class that

• 3:40Wes Bos?

  they can apply to that element, which is some generated X random token that puts in there. So if you're looking at like the, we did a show called, why is Facebook's HTML and CSS such a mess? Because if you, if you inspect element on it, it's like impossible to read. But that's, that's obviously not how it's authored, or maybe not. Obviously, I think a lot of people think that they, they write it like that.

• 4:04Scott Tolinski?

  Yeah. Yeah. You know what? I mean, and this is the exact same way that like something like how Svelte does their scoped CSS. It generates these kind of wild class names as well. So not exclusive to StyleX, that strategy of generating these types of class names. I believe the Babel plugin for styled components did the same. So yes.

• 4:27Wes Bos?

  The difference between the way that Svelte does it and the way that StyleX does it is StyleX gives you a class for every single unique property value pair. Whereas the Svelte and like, like CSS modules and a lot of like the, I think it's Panda, we'll talk about Panda in just a second. Those will create a single unique class for that item. So you might have like podcast card where it has like a border, it has a background, a radius, a box shadow. All of those things will be like, okay, we'll put that into a single class called like show card or like X4935, some random ID. Whereas this, it will literally break apart every single property value and then assign it. That's why like every single

• 5:12Wes Bos?

  element here has sometimes 20, 30 different classes. Yes. Only one per.

• 5:18Scott Tolinski?

  It's a wild strategy. And I think that it's, one, I think that it's there to save a bunch of code. I mean, it's there to save you a bunch of ship, like shipping a bunch of extra stuff, which, you know, in this world where we're just shoving as much stuff into the browser as we can these days, obviously having this strategy to deal with that, I am pro for. So that, that I think is interesting. You'll, you'll notice some like hesitation when I talk about this in general, because I'm so repulsed by the syntax. I have such a hard time.

• 5:55Wes Bos?

  Put the syntax away.

• 5:57Scott Tolinski?

  I'm, I can't. It's so hard, but I, I'm keeping an open mind and I understand why this is cool. So people have started talking about this recently and Jared Palmer had a tweet, dude, it feels like a week ago, but it was yesterday. He says, after about a decade of atomic CSS frameworks, base CSS, and then finally Tailwind, I'm finally convinced that StyleX is superior for agents. StyleX constraints lead to greater consistency and correctness as your codebase grows. I do think Tailwind is the ideal human DSL for styling, but in a world where I'm barely touching CSS class names by hand, the trade off has changed. Again, if I were writing code, Tailwind still wins, but we're not doing that anymore.

• 6:40Scott Tolinski?

  I would disagree that Tailwind is the best to write by hand. I like writing it just a single class name, but yeah, I, I totally get where he's coming from in this. And this tweet in particular, made me stop and go, I kind of feel like he's probably right about this.

• 6:57Wes Bos?

  Yeah. Yeah. Yeah. Like again, putting aside what it looks like, because I also don't like, like what it looks like and I hate authoring it that way. But if you're, if you're looking at it, like for initially Tailwind was the winner for agents, because it was so good at writing, spitting out Tailwind, right? And

• 7:16Scott Tolinski?

  Yes.

• 7:17Wes Bos?

  What is so good about Tailwind is that it can, it can look at the markup and it's co-located with how it looks. And if you're writing typical CSS, you would often have your CSS in like a separate file and then linking those two things together was, was kind of tricky for an agent, right? And this is not the first thing to solve that, right? Svelte solves this by simply just like, you have your, your markup and your CSS in the same file, right? That's, that's beautiful. I absolutely, it's probably my favorite way to write CSS.

• 7:47Scott Tolinski?

  My favorite way to, I need to separate my favorite way from a favorite system that can work well.

• 7:54Wes Bos?

  Yes, exactly. Because I think at the end of the day, a, a system that is rigid and works well as you scale from a website with 20 pages on it to a property like Facebook that has hundreds of thousands of components that, that need to be that write CSS for. Like I remember hearing like LinkedIn writes something like 30,000 lines of CSS every single day. I forget what the actual stat was, but it was mind blowing how much CSS they were just adding to the platform every single day. And when you get into that type of scale, it gets away. Yeah, it doesn't surprise you.

• 8:33Scott Tolinski?

  Yeah. That's a rough styled site. Sorry, LinkedIn folks.

• 8:38Wes Bos?

  Another, another one right here is Adam Hutchinson from Linear, right? Linear, long held as one of the like best web properties out there. They care a lot about the engineering. We've moved more than 50% of Linear to StyleX so far. It's given us more control over how components compose, what can be overwritten and improved render performance as well. So that's a really interesting one, because the browser doesn't necessarily have to. Figure out what overrides are there, right? Like with with typical CSS, if you have like margin zero, margin bottom four, right? It applies the margin zero and then it has to figure out, okay, no, but then I do want to add margin bottom four, right?

• 9:21Wes Bos?

  If it's simply just straight up, every class is not overriding each other. It's not cascading down. It's none of that. That can improve render performance, which Aiden Byv had him on the podcast. He's a really smart guy. He's made like React Doctor, several other of the React plugins that will help you figure out the perf. Million dot dev, like really cracked like performance dev here. He says, I just migrated my personal site from Tailwind to StyleX. So first contentful paint 20% faster, largest contentful paint 7% faster, CSS 50% smaller.

• 10:00Wes Bos?

  Because again, literally every time you use margin bottom 1px, margin bottom color red, like that's, you're literally only shipping that once, even though you might use it millions of times. And you might say, yeah, Wes, but Gzip, because like with Gzip, if you were to send the same string 10,000 times, doesn't matter because the browser just gets it once, right? But the actual parsing of that CSS can slow it down. I don't know. Most people are having like CSS performance issues on their website, but like these are obviously, he doesn't say like what the thing is. It's probably milliseconds, but it is something, right?

• 10:40Scott Tolinski?

  And if it's trivial to implement, then, or if it's, you know, hey, AI agent, make this StyleX, then it's like, why wouldn't you just accept? Obviously rewriting your platform is different than like Greenfield or something like that. But still, like if you're making that choice, especially if you're in a React world where CSS is such a pain, like I, I kinda, kinda am feeling like, ah, man, Wes, you can feel it in my voice here. I'm kind of feeling like I need to try this. I'm understanding it, but I'm also trying to resist my urge of picking up all the new stuff all the time, even though this isn't new. I'm trying to resist my urge of being like, ooh, people say that's good.

• 11:25Scott Tolinski?

  I gotta have it.

• 11:26Wes Bos?

  Yeah.

• 11:27Scott Tolinski?

  So yeah, I do, I, okay.

• 11:29Wes Bos?

  Well, so let's talk about the pros of it and see if we can get you all the way there, right? Because the first part we have here is that it's type safe. With Tailwind or with regular CSS, you are simply just writing strings, right? And if you have something like a design system where you want to constrain what CSS can be written, if your entire CSS thing is, is type safe, meaning like just like TypeScript where you can allow and disallow certain things and infer the types from it, then you can have a little bit more control over what is and isn't allowed. Not to say that you couldn't do this before. Scott's talked about many times on this podcast about different CSS linters.

• 12:13Wes Bos?

  He's wrote his own CSS linter, right? Like you can enforce that, but when you have a rigid way where an agent or yourself can know, is this allowed or not, then it is, it's much easier to stay within the lines and stop you from getting that CSS drift.

• 12:33Scott Tolinski?

  Yeah, the linting, any deterministic systems, those types of things are endlessly important, especially in CSS, because AI world, man, AI just loves to do whatever the heck it wants to do with CSS. So yes, there is no runtime dependency. So this is something that, like you say here, that most CSS methodologies no longer have this, like they're done at build time. For a long time, you needed to have Babel plugins for various ones, but it feels like we've kind of moved out of that world a little bit.

• 13:04Wes Bos?

  Yeah.

• 13:05Scott Tolinski?

  So most people are building their code anyways.

• 13:08Wes Bos?

  Was the big one where every time your React component rendered, it would then compute what the CSS would be. And we did that mostly because we needed it. Yeah, we needed to be dynamic, right?

• 13:20Scott Tolinski?

  Yeah.

• 13:21Wes Bos?

  But now with CSS variables and whatever, we realize, oh, it's much better to compute all of that at build time, figure out what all the possible CSS is, and then ship that. And then if you are doing things like, like you're conditionally setting some CSS based on if something is focused or if something is in a certain state, your, your JavaScript will simply just add and remove those classes rather than adding and removing, figuring out what styles need to be added at runtime.

• 13:48Scott Tolinski?

  Yes. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. All right. Yeah, another one is that it's reusable, super easy to reuse. I mean, that's the one thing about CSS modules that I have a hard time with is needing to import and export everything. But at the end of the day, you know, having that there does make it easier to have. It's safer.

• 14:30Wes Bos?

  Yeah.

• 14:30Scott Tolinski?

  You're not, there's no chance of you using something that doesn't exist. Like even if you, I mean, you can have linting set up, right? To prevent you from using classes that don't exist. But a lot of times, you know, I've had AI write like a dot, whatever class that it thinks exists in my codebase because it got it in its training data. And it's like, without having a linting step in there, there's nothing to be like, oh, by the way, this CSS class does not exist, you know?

• 14:57Wes Bos?

  I did my whole site in CSS modules after I wrote it in Panda and I moved it to a couple of different ones. And I finally landed on CSS modules. And I did that because when I'm viewing a component or in this age, when an agent is viewing a component, it should be, you should be able to click on the styles and, and go to where those styles are, are defined. With, with regular CSS where you have a class, you're, you're ending up like searching for, for where that is, like, like, okay, this is a class here, but like, where is that defined? Oh, it's in several different files. When it is all typed and all the way down, then you can just kind of click through and see exactly where those styles are.

• 15:39Wes Bos?

  So in that case, I do not mind importing it, even because like the auto import, I set up auto import with it. And if I just write a class of like big card or highlighted card or danger, then it would just auto import for me. I didn't have to really worry about that. And I absolutely love that. And I, that's one thing I don't like about Tailwind is that, like, if you want to reuse styles in Tailwind, you, you kind of have a couple of options, right? You can, you can create a string and you can just export that string from a file and import it every, everywhere that you need it. Or you could, what a lot of people do is they'll, they'll create a secondary like component, right? So instead of like having a div with the class of like special on it, they would make

• 16:22Wes Bos?

  a special like div component and they would then import that. And then, and then I don't like that either because now, now you have to make a whole, like I just want to add a couple of styles to this thing. And now I'm having to like make a whole nother component. That's a big pain, especially in like Spelt land where you can't define multiple components in a single.

• 16:40Scott Tolinski?

  You can, you can, that's updated information. You can do that.

• 16:43Wes Bos?

  Now we can do that, right?

• 16:45Scott Tolinski?

  Yeah. But you know what? It's a, this, this type of thing, this is crazy. Like my brain is, is like struggling with this, but this type of thing I think is dope. I, I, I like this in regards to being able to get that control. Being, because I, I did love that about styled components where you had the wrappers and it just like worked like that. But I haven't found any other style wrapper style of things that work well post styled components. So I guess I can get into importing CSS. It just has to be the right API or the right surface. And, and maybe again, like this surface isn't for me.

• 17:27Scott Tolinski?

  I have in all capital letters, it is not for me, but it is seem like it is for agents.

• 17:34Wes Bos?

  Yes.

• 17:35Scott Tolinski?

  Yes. You know, you are, I mean, it's JavaScript too. And a lot of the stuff like overriding or anything like that, they're done inside a function. So you have, you know, overrides, you have conditional styling, you have composability. And, and I love that about styled components, when you could just exit out and go into JavaScript and do some JavaScript inside of your CSS. I like that.

• 17:56Wes Bos?

  The composability is, is a huge one because like with Tailwind, you gotta like use some like class X or Tailwind merge or something like that where you're like, okay, well, I have like these base styles and now I want to extend them and overwrite some of them. You gotta make sure they're in the right order. You know what's really good at merging and overwriting properties? JavaScript objects. Very, very good. Versus strings, fantastic for that type of thing.

• 18:24Scott Tolinski?

  Totally.

• 18:25Wes Bos?

  So that's the pros. The cons, we obviously sucks the right by hand. It's like, right? Especially when you get into like writing nested media queries or like pseudo classes or a lot of the new like, like sibling index, a lot of the new CSS. Awful to write by hand.

• 18:45Scott Tolinski?

  Yes, awful to write by hand.

• 18:46Wes Bos?

  I just can't do it. Like the

• 18:50Scott Tolinski?

  I have the syntax here for like defining or to like modifying an existing variable. Like it's just the amount of code used compared to like, oh, you need a function that then has a string interpolation. You got, uh, you know, an object inside of there and you're having to pull out a property. It's like, you know, in, in normal CSS, you're just like var hyphen, hyphen text, you know? It, the, the amount of change, the amount of code you're having to write there is more. And that like, it's ugly for me to look at. It's hard, it's hard, it's hard for me to look at folks. I'm having a hard time looking at it. I wanted to know about modern CSS properties in this thing. One thing I have with Tailwind is that you kind of have to wait for them to implement,

• 19:32Scott Tolinski?

  you know, modern, cutting edge stuff all the time, right? They, it's a DSL or it's a subsystem of CSS. So you gotta wait, like, you can't just go ahead and Yolo the newest stuff. I, I would assume that's the same with this because everything's in the JavaScript object and it's fully typed. So you, you know, you're gonna be waiting for that.

• 19:53Wes Bos?

  A little less of an issue here because like new stuff that comes in CSS is simply just going to be like a property or a value. I think in some cases where you do have some weird syntax, you probably are better off just bowing out to like a CSS sheet. That's what I do in Tailwind as well, where I'm like, I could write Tailwind plugin for this and make some like weird abstraction or whatever. But you know what's easier is just, just write some CSS for that. It, that's, and that's fine. That's not like losing at Tailwind. They might come out with like an abstraction on top of it that makes it a little bit easier to author. But there's nothing wrong with just throwing a little bit of CSS in there. I guess it could be wrong if, if everybody starts doing it and then

• 20:37Scott Tolinski?

  Now you got two systems. Yeah, for me, that's a tough one. Um, but again, it's probably for most, like 99% of projects, not a big deal because sometimes I'm getting into, to some wacky stuff and most people aren't.

• 20:53Wes Bos?

  You do some wacky stuff.

• 20:54Scott Tolinski?

  Honestly, yes.

• 20:58Wes Bos?

  nested CSS, this is one thing that kills me with most stuff is you write like a selector, like a, like podcast heading. And then inside of that, maybe you have like, like a span around like the, the podcast number, right? Um, and in almost all of these implementations, what they want you to do is the podcast heading is one style and then the podcast number would be a secondary style that even though it's just a span inside there. In so many cases, I just want to nest a span selector inside of that. Cause I know that's literally the only thing that will be applied to it. And I love to write not too nested, but nested selectors inside of it. And, and with this type of stuff, you're every single element, you're writing a brand new

• 21:42Wes Bos?

  uh, selector, you're writing a brand new object for it. I'm sure there are ways to do it, but then like, even with, with CSS modules, if you want like the nesting to apply, um, it can get really, really tricky. And also with like Svelte as well, you have to use the stupid like global selector on top of it. And I get why, but sometimes I just want to nest things inside. So it's not that great in this case.

• 22:07Scott Tolinski?

  Yes. Yeah. I, yeah, those are the things I have the hardest time with, I think. But then again, again, to, I keep going back to, it's not for me to author. If I'm using StyleX, if I'm going to use this thing, I'm not going to be writing it by hand. I'll say that.

• 22:23Wes Bos?

  Yes, I agree. Let's talk about some alternatives here. Panda CSS, we've done a whole show on it. We'll link it up. You can go back and, and listen to that one. Panda CSS follows the same sort of ideas. However, they allow you to author it either in like a, like a, like a tagged template syntax, which I absolutely love because it's as, as similar to writing CSS as possible. Um, or you can write it in the object syntax, which, um, is very similar to, to using something like StyleX. So that's great. Like they have figured out, you still get all the benefits of StyleX. But you still, you, you can use like the tagged templates.

• 23:06Wes Bos?

  Um, which is, is kind of best of both worlds. The nesting, still a problem here, but that's, I think that's inevitably why I moved off of it. Cause I wanted the nesting of CSS modules. But I think that like, if you're going from absolute scratch, Panda is, is a highly, you should definitely check it out if you're, if you're considering StyleX.

• 23:30Scott Tolinski?

  And they got cooler branding. So, you know?

• 23:32Wes Bos?

  Panda, yeah.

• 23:34Scott Tolinski?

  They got yellow and black. It's like very up our alley here. Yes.

• 23:38Wes Bos?

  Love that. Love that.

• 23:39Scott Tolinski?

  Yes. And they have the panda guy's kind of cool too. So, you know, uh, pros and cons here. One's got a panda guy, one's got a kind of like corporal logo.

• 23:51Wes Bos?

  Yeah, that's cool.

• 23:52Scott Tolinski?

  Yeah, it's cool.

• 23:54Wes Bos?

  Another thing is I don't love this, like the spreading syntax either.

• 23:58Scott Tolinski?

  Oh, it's ugly as hell.

• 23:59Wes Bos?

  You don't have to spread, but you can.

• 24:02Scott Tolinski?

  You don't have to spread, but you can. Yeah. I just have such a hard time. You know, the one thing I could get behind is if it's a greenfield vibe coded project, it's something that I'm just straight up looking for what's going to give me the least amount of issue with AI agents writing CSS. Cause let's face it, they suck at CSS. Everything is just kind of done in the moment. When I think about it, adds it and then emits unmaintainable systems. And if this could fix that, then you know, I'm, I'm, would be reasonable to, to try it. What's going on there? Oh, you're typing. I was like seeing a bunch of arrows flashing. Yeah.

• 24:40Wes Bos?

  Well, let, let me show you. This is like a, like a visual representation of how good StyleX is.

• 24:46Scott Tolinski?

  And please describe to the folks on audio.

• 24:48Wes Bos?

  In their playground, I'm typing styles. Uh, I can't spell styles, styles, dot. And like it automatically completes styles up button, button row, button secondary, card, content block. Like you're not saying, uh, what was the class that I was using for button links? It's, it's just auto completed for you, right? So like dot button, dot. And then here's all of the, I mean, scroll, I can't scroll over, but now it's, it's proposing all of the CSS properties, right? Align item, background, border radius, color. It's like every single property value is typed all the way down, which is absolutely beautiful when you're trying to apply these styles. And now I know most people are just going to slop code their CSS anyways.

• 25:31Wes Bos?

  But if you're writing something that if, if you want to author what it looks like to make it look good, and then give that to your agent to, to reuse, that's a fantastic way to write your CSS.

• 25:42Scott Tolinski?

  Yeah. You know, it was the, the, the thoughts that are going through my brain. I don't like them. That is like, what if I had, uh, I took my graffiti CSS, which is already a great system. And I told an agent to make it into a nice little component library using Stilex. I feel like that one fit really well, considering it's CSS based components. Oh, I don't like this. Yeah.

• 26:05Wes Bos?

  If your whole hang up to this is just like, I like writing the CSS syntax.

• 26:09Scott Tolinski?

  It is, it is.

• 26:09Wes Bos?

  Like get over yourself.

• 26:11Scott Tolinski?

  I can't, yeah, I know that's, listen, I'm telling you folks, I'm acknowledging that. I'm working on myself here. I'm entertaining this. Yes.

• 26:21Wes Bos?

  All right. Stay tuned for the next episode where Scott is fully StyleX pilled and, uh, he's gonna not stop talking about it.

• 26:29Scott Tolinski?

  If you've listened to the show at any amount of time, you know, that's, that's coming. So, uh, yes.

• 26:35Wes Bos?

  Peace.