Why Everyone Is Moving to Stylex?  🔗 **Source:** [Why Everyone Is Moving to Stylex?](https://www.youtube.com/watch?v=NIG9GbVU5po) > [!note]+ Document Notes > --- > tags: [stylex, css-in-js, atomic-css, tailwind, panda-css, css-modules, ai-agents-and-css, design-systems, type-safe-styling, css-performance, syntax-fm, wes-bos, scott-tolinski, frontend-tooling] > author: Syntax (Wes Bos & Scott Tolinski) > source: youtube.com > reference: https://www.youtube.com/watch?v=NIG9GbVU5po > date created: 2026-09-02 08:40 > --- > > [!info] Generated analysis — not the author's words. Sections below are machine-written > > from the captured source. Only text inside `> [!quote]` blocks is verbatim from the author. > > Do not quote or attribute any other line to the named author. > > [!warning] Auto-caption transcript, ~4,200 words, 26:37, uploaded 2026-09-02 > > Syntax.fm episode; hosts Wes Bos and Scott Tolinski, no guest. ASR artifacts throughout: "Stylux"/"Stilex" = StyleX; "House Felt" = Svelte; "react doctor" is likely React Scan; "Aiden Bive" = Aiden Bai (Million.dev); "Adam Hutchinson from Linear" is an unverified name — treat as "a Linear engineer" until checked; "graffiti CSS" is Scott's own CSS system as heard, spelling unverified. Sponsor read: Sentry (sentry.io/syntax) mid-episode. Promo: Syntax meetup, Barebottle Beer Garden, Salesforce Park, San Francisco, Tuesday 2026-10-27, during GitHub Universe week. No links in the capture; the hosts refer to "show notes" and two earlier episodes (Panda CSS; "Why is Facebook's HTML and CSS such a mess?") not linked here. Every third-party claim (Linear >50% migrated; FCP/LCP/CSS-size figures; LinkedIn "30,000 lines of CSS every day") is the hosts relaying a tweet or a memory — none is sourced in the transcript, and Wes flags the LinkedIn figure himself ("I forget what the actual stat was"). > # 🏷️ Title: Why everyone is moving to Stylex? > ## 🧭 Table of Contents > - [📝 Summary](#-summary) > - [📖 Main Content](#-main-content) > - [🗒️ Notes](#️-notes) > - [📚 References](#-references) > - [🗣️ Paraphrase](#️-paraphrase) > - [📰 Newsletter](#-newsletter) > - [✅ Action Items](#-action-items) > - [🧪 Hypotheses](#-hypotheses) > - [📊 Methodology](#-methodology) > - [❓ Questions](#-questions) > - [🔮 Future Research](#-future-research) > - [💡 Implications](#-implications) > - [🧠 Learning Styles Assessment](#-learning-styles-assessment) > - [📊 Accessibility Assessment](#-accessibility-assessment) > - [🌍 DEIB Assessment](#-deib-assessment) > - [✅ Logical Validity](#-logical-validity) > - [🛡️ DARVO Analysis](#-darvo-analysis) > - [🎯 Conclusion](#-conclusion) > ### 🔗 References > - Source: https://www.youtube.com/watch?v=NIG9GbVU5po > - Mentioned, not linked: StyleX (Meta) · Panda CSS · CSS Modules · Tailwind · styled-components · Svelte scoped styles · Million.dev / React Scan (Aiden Bai) · Linear · Jared Palmer's tweet · syntax.fm/meetup · sentry.io/syntax (sponsor) > ## 📝 Summary > **What this is.** A 27-minute two-host discussion of StyleX, Meta's build-time CSS-in-JS system, prompted by a wave of posts claiming it's the right styling layer for AI coding agents. Wes Bos is cautiously for it; Scott Tolinski finds the syntax "fairly grotesque" but spends the episode talking himself toward trying it. They cover the mechanism, the claimed adoption, pros, cons, and one alternative (Panda CSS), then close with Wes demoing autocomplete. > **The mechanism.** You author styles as typed JavaScript objects; a compile step emits one class per unique property-value pair (`X1I10HFL` → `padding-top: 0`). Every element ends up with dozens of single-purpose classes; every property-value pair ships once no matter how many times it's used. This differs from Svelte, CSS Modules, and Panda's default, which emit one hashed class per *rule* (a "show card" class carrying border, background, radius, shadow together). StyleX splits to the atom. > **"Everyone" is four data points.** What the transcript actually names: Meta (the origin, all properties); Linear ("more than 50%… so far," relayed from an engineer's post, name garbled in captions); Jared Palmer's tweet ("after about a decade of atomic CSS frameworks… I'm finally convinced that StyleX is superior for agents"); and Aiden Bai's personal-site migration (FCP 20% faster, LCP 7% faster, CSS 50% smaller). That's one origin company, one product team, one opinion, and one personal site. The title is the hosts' own framing; Wes opens with "everybody's talking about" it and notes "we did an episode three years ago on it. Now everybody is on to it." > **Pros as argued.** Type safety (the design system becomes a constraint the compiler enforces, so "CSS drift" stops — including AI-invented class names that don't exist); no runtime (build-time like most modern approaches; conditional styles become class toggles); reusability via import/export with go-to-definition; composability through JavaScript object merging instead of Tailwind's string-merge ordering games; autocomplete "all the way down." > **Cons as argued.** Awful to author by hand — media queries, pseudo-classes, and variable references need far more code than plain CSS; no nesting (every child gets its own object); spread syntax is ugly; possibly waiting on the library for new CSS features (Wes pushes back: new CSS is mostly new property/value pairs, which pass through). Scott's summary of his own position: "it is not for me, but it seems like it is for agents." > **Bottom line.** The episode's real claim is narrower than its title: StyleX trades human authoring ergonomics for machine-checkable constraints, and that trade flips in favor of StyleX once an agent is writing most of the CSS. The evidence offered is anecdotal and unsourced in the transcript. The framing question — what styling system minimizes agent-generated drift — is a good one and applies directly to WordPress theme.json and block styles, which have no type layer at all. > ## 📖 Main Content > **Opening frame (00:00–02:30).** Wes: everyone assumes Meta's random class names are an internal Tailwind; they're not — it's StyleX, "their own way of writing CSS, and it's actually pretty smart." Scott's disclosure up front: "there's nothing that makes me feel more icky than writing CSS inside of a JavaScript object." The episode is structured as Wes making the case and Scott resisting, which is a useful format because the objections get voiced. > **Meetup promo.** San Francisco, Tuesday October 27, Barebottle Beer Garden at Salesforce Park, same venue as last year, during GitHub Universe but not part of it. Producer Randy will be there. (Not analytical content; recorded here because it's a date.) > **How StyleX works (02:30–06:00).** Author styles like CSS selectors but in typed JS; compile step converts to hashed atomic classes. Wes's example: `X1I10HFL` = `padding-top: 0`. The distinguishing design decision, stated precisely by Wes: "StyleX gives you a class for every single unique property-value pair. Whereas the Svelte and CSS modules and… Panda… will create a single unique class for that item." Scott notes the hashed-class strategy itself isn't unique (Svelte, styled-components' Babel plugin); Wes clarifies the granularity is what's different. Result: elements with "sometimes only 30 different classes. One per." > **The adoption evidence (06:00–10:00).** Four items, in order presented: > 1. *Jared Palmer's tweet* ("it feels like a week ago, but it was yesterday"): a decade of atomic CSS → Tailwind → now convinced StyleX is superior *for agents*; Tailwind remains "the ideal human DSL" but "we're not doing that anymore." Wes disagrees Tailwind is the best hand-authoring experience but says the tweet "made me stop and go… he's probably right." The reasoning Wes reconstructs: Tailwind won for agents because styles are co-located with markup; StyleX keeps co-location and adds constraints. > 2. *Scale anecdote:* "LinkedIn writes something like 30,000 lines of CSS every single day. I forget what the actual stat was." Explicitly unverified by the speaker. > 3. *Linear:* an engineer's post, ">50% of Linear to StyleX so far, giving us more control over how components compose, what can be overridden and improved, and render performance." Wes's mechanism for the perf claim: atomic classes don't cascade against each other, so the browser resolves fewer overrides. > 4. *Aiden Bai (Million.dev):* migrated personal si Stylux, everybody's talking aboutStylux. We’re going to do an episode onit. If you've ever opened up a metaproperty Facebook, whatever, you'll seethat their classes just have all theserandom classes on it. And everybodyassumes that that's Facebook's owninternal version of Tailwind. And itthat's not the case at all. It's theirown way of writing CSS, and it's actuallypretty smart. We did an episode three yearsago on it. Now everybody is on to it. It's great for agents. There are somepros and the cons. We're going to go intoall of it, what people are saying aboutit, as well as some of the alternatives. Let's get on into it. You ready, Scott?>> Oh, I'm, I'm, I'm as ready as I can be,Wes, because honestly, there's a lotthere's a lot about uh Stylux I find tobe fairly grotesque, but I'm, I'm keepingan open mind. This is me keeping an openmind. Folks, you can change and you cankeep an open mind, too, because there'snothing that makes me feel more icky. Than writing CSS inside of a JavaScriptobject. And today, we're going to betalking about that.>> We're going to talk about how great itis. Yes.>> Yes.>> Yeah, but before we get into that, weare going to be doing a meetup in SanFrancisco, Tuesday, October 27th.It might be a spooky meetup, but I don'tthink it's going to be that spooky. So,come on down. We're going to be at theBarebottle Beer Garden. If you've cometo a Syntax meetup in October, uh, it'sat the same place we had it last year.And let me tell you, we had a greattime. There was a huge turnout. You cancome around, uh, have some beers, havesome just, uh, sodas or waters or whateveryou like to drink.>> To have swag there. It's going to besick.>> We're going to have swag. Uh, the wholeSyntax team. Have youHave you been dying to meet producer? Randy? He's going to be there. You cansay hi. It's going to be sick.>> [laughter]>> So again, Salesforce Park, uh, at theBarebottle Beer Garden. Uh, we will haveall of the information in the show notesas well as a link. You can head tosyntax.fm/meetupif you want to get more information.It's going to be a ton of fun, and Ican't wait. We should also say, eventhough we're in town for GitHubUniverse, this is not part of GitHubUniverse. So, you don't need a GitHubUniverse ticket or anything like that.So, you just come as you are. Come asyou are. Just come and hang out. Andit's always a good time.>> [music]>> All right, let's talk about StyleX. So,StyleX is the way that all metaproperties write their CSS. And the waythat it works is that you author yourstyles in kind of similar to how youwould write like a CSS selector. And theSyntax is significantly different. We'llget into why that is in just a second. But put aside the syntax for asecond, becausewe want to talk about the pros andcons and all of that type of stuff.So, the way that it works is that youwrite these StyleX selectors, and yougive it your font size, your lineheight, your color. They're fully typed.You can share them. You can import andexport them. It's all done inside ofinside of JavaScript. And then there isa compilation step, which willessentially turn all of that CSS intothese crazy class names. So, if you lookat any meta property, right? You seelike X1I10HFL.And that will correspond to likepadding top zero. So, the benefit ofthis is that it will go through all ofyour styles. You can author them likeyou're used to with regular CSSstyles. And then, anytime you use paddingtop zero or margin bottom zero anywhere. In your application, you might useit like Meta probably uses it 300,000times across all their properties. Theycan get rid of all of those and simplydistill it down into a simple one classthat they can apply to that elementwhich is some generated X random tokenthat puts in there. So, if you'relooking at like the, we did a show calledWhy is Facebook's HTML and CSS such amess? Because if you, if you inspectan element on it, it's like impossible toread. But, that’s, that’s obviously nothow it’s authored or maybe not. I think a lot of people thinkthat they write it like that.>> Yeah. Yeah, you know what? I mean, andthis is the exact same way that, likesomething like House Felt does theirscoped CSS. It generates these kind ofwild class names as well. So, notexclusive to StyleX, that strategy ofgenerating these types of class names. Ibelieve the Babel plugin foruhStyled components did the same. So,>> The difference between the way thatSvelte does it and the way that StyleXdoes it is, StyleX gives you a class forevery single unique property-value pair. Whereas,the Svelte and like CSS modules anda lot of theI think it's Panda. We'll talk aboutPanda in just a second.Those will create a single unique classfor that item. So, you might have likepodcast card where it has like a border,it has a background, a radius, a boxshadow. All of those things will belike, "Okay,we'll put that into a single classcalled like show card or like X4935 somerandom ID."Whereas, this it will literally breakapart every single property value>> Mhm.>> And then assign it. That's why, like,every single element here has sometimesonly 30 different classes. Yeah. OnlyOne per. >> It's a wild strategy. And then I, I thinkthat it's uhone. I, I think that it'sthere 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 wherewe're just shoving as much stuff intothe browser as we can these days.Obviously, having a strategy to dealwith that, I am pro for. So,that. >> [laughter]>> That I think is interesting. You'llnotice some hesitation whenI talk about this in general.Because I'm so repulsed by this index. Ihave such a hard time, and then it, it'sPut the syntax away. I'm trying, Ican't. It's so hard, but I, I'm keepingan open mind, and I understand why thisis cool. So, people have started talkingabout this recently, and Jared Palmer hada tweet. Dude, it feels like a week ago, but itwas yesterday.He says after about a decade of atomicCSS frameworks, base CSS, and thenfinally Tailwind, I'm finally convincedthat Stilex is superior for agents.Stilex constraints lead to greaterconsistency and correctness as your codebase grows. I do think Tailwind is theideal human DSL for styling, but inworld where I'm barely touching CSSclass names by hand, the trade-off haschanged. Again, if I were writing code,Tailwind still wins, but we're not doingthat anymore. I would disagree thatTailwind is the best to write by hand. Ilike writing it just a single classname, but>> Uh yeah.>> I totally get where he's coming fromin this, and this tweet in particularmade me stop and goI kind of feel like he's probably rightabout this.>> Yeah. >> Yeah.>> Yeah, like again, putting aside what itlooks like because I also don't like the way itlooks, and I hate authoringit that way. But if you're looking at it likefor initially, Tailwind was the winnerfor agents because it was so good atwriting,spitting out Tailwind, right? And>> Yes. >> What is so good about Tailwind is thatit can look at the markup andit's co-located with how it looks. Andif you're writing typical CSS, you wouldoften have your CSS in a separatefile, and then linking those two thingstogether was kind of tricky for anagent, right? And this is not thefirst thing to solve that, right? Sveltesolves this by simply just like you haveyour markup and your CSS in thesame file, right? That's that’sbeautiful. I absolutely think it’s probably myfavorite way to write CSS, the wayThat CSS,>> way to I need to separate my favoriteway from a favorite system that can workwell. >> Yes. Exactly. Because I think at the end,of the day,a system that is rigid and works wellas you scale from a website with 20pages on it to a property like Facebook,that has hundreds of thousands ofcomponents that need to be thatright CSS for. Like I remember hearinglike,LinkedIn writes something like30,000 lines of CSS every single day. Iforget what the actual stat was, but itwas mind-blowing.How much CSS they were just adding tothe platform every single day. And whenyou get into that type of scale,it gets away. [laughter]Yeah, it doesn't surprise you. >> Yeah.That's a rough StyleX site. Uh, sorry,LinkedIn folks. >> Another, another one right here is, uhAdam Hutchinson from Linear, right?Linear, long uh, held as one of the likebest web properties out there. They carea lot about the engineering. We've movedmore than 50% of Linear to StyleX, sofar, giving us more control over how components compose,what can be overridden and improved,and render performance as well.So, that's a really interesting one because thebrowser doesn't necessarily have tofigure out what overrides are there,right? Like with, with typical CSS, ifyou have, like, margin zero, margin bottom,four,right? It applies the margin zero, andthen it has to figure out, oh,okay, no, but then I do want to addmargin bottom, four, right? If it'ssimply just straight-upevery class is not overriding eachother, it's not cascading down, it'snone of that. That can improve renderperformance, which Aiden Bive had him onThe podcast. He's uh really smart guy. He's has like react doctor and severalother of the react plugins that willhelp you figure out the perf. Milliondot dev, like really cracked, likeperformance dev here. He says, I justmigrated my personal site from Tailwindto StyleX. So first contentful paint, 20% faster,largest contentful paint, 7% faster. CSSwas 50% smaller. Because, again, literally every time youusemargin bottom, one px,margin bottom, color red, like that’syou’re literally only shipping that once,even though you might use it millions oftimes. And you might say, yeah Wes, but Gzip,because, like, with Gzip, if you were tosend the same string 10,000 times,it doesn’t matter, because browser just getsit once, right? But the actual parsing ofthat CSS can slow it down. I don’t know.Most people are having like CSS. Performance issues on their website, butlike these are obviously, I he doesn'tsay like what the thing is. It'sprobably milliseconds, but it issomething, right? >> And if it's trivial to implement then, orif it's, you know, hey, AI agent, make thisstyle X, then it's like, why wouldn't youjust accept? I, obviously, rewriting yourplatform 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, Ikind of,kind of, I feel like,man,Wes, you can feel it in my voice here.I'm kind of feeling like I need to trythis. >> I'm understanding it, but I also tryto resist my urge of picking up all thenew stuff all the time, even though thisisn't new. >> [laughter]>> I'm trying to resist my urge of beinglike people say that's good I got tohave it. >> Yeah.>> So yeah I do I okay.>> Welllet's>> talk about the the pros of it and see ifwe can get you all the way there. >> Yeah.>> like the first pro we have here is thatit's type safe. With Tailwind or withregular CSS, you are simply just writingstrings. Right? And if you havesomething like a design system where youwant to constrain what CSS can bewritten, if your entireCSS thing is type safe, meaning likejust like TypeScript where you can allowand disallow certain things and inferthe types from it, then you can have alittle bit more control over what is andisn't allowed. Not to say that youcouldn't do this before. Scott's talkedDifferent CSS linters. He's wrote hisown CSS linter. Right? Like you canenforce that. But when you have a rigidway where an agent or yourself can knowis this allowed or not, thenit is much easier to stay within thelines and stop you from getting that CSSdrift. >> Yeah, linting any deterministic systems,those types of things areendlessly important, especially in CSS,becauseAI world, man, AI just loves to dowhatever the heck it wants to do withCSS. So, yes. There is no runtimedependency. So, this is something thatlike you say here that most CSSmethodologies no longer have this. Likethey're done at build time. For a longtime you needed to have Babel pluginsfor various ones, but it feels likewe've kind of moved out of that world alittle bit. >> Yeah.>> Um, so, most people are building theirProjects anyway. >> Big one where every time your Reactcomponent rendered, it would thencompute what the CSS would be.And we did that mostly because we neededit toYeah, we needed it to be dynamic, right?>> Yeah.>> But now with CSS variables and whatever,we realized, oh, it's better tocompute all of that at build time,figure out what all the possible CSS is,and then ship that. Um, and then if youare doing things like, like you'reconditionally setting some CSS based onif something is focused or something isin a certain state, your JavaScriptwill simply just add and remove thoseclasses rather than adding and removing,figuring out what styles need to beadded at run time. >> Yes. [music] And if you want to see allof the errors in your application,you'll want to check out Sentry atsentry.io/syntax. You don't want a production applicationout there that, well, you have novisibility into in case something isblowing up, and you might not even knowit. So, head on over tosentry.io/syntax.Again, we've been using this tool for along time, and it totally rules. Allright. >> Yeah, another one is that it's, uhreusable, super easy to reuse. I mean,that's the one thing about CSS modulesthat I have a hard time with is needingto import and export everything, but atthe end of the day, you know, havingthat there does make it easier to, uhhave. Uh, it's safer. >> Yeah. You're not. There's no chance ofyou using something that doesn't exist.Like, even if you, I mean, you can havelinting set up, right, to prevent youfrom using classes that don't exist, buta lot of times, you know, I've had AIwrite, like, a dotuh, whatever class that it thinks exists. In my code base because it got it in itstraining data and it's like withouthaving a linting step in there, there'snothing to be like, "Oh, by the way,this CSS class does not exist, youknow?">> I did [snorts] my whole site in CSSmodules after I wrote it in Panda, and Imoved it to a couple of different ones, andI finally landed on CSS modules. And Idid that because when I'm viewing acomponent or in this age, when an agentis viewing a component, it should be youshould be able to click on the stylesand go to where those styles aredefined. With regular CSS where youhave a class,you're ending up like searchingfor where that is. Like, okay,this is a class here, but like where isthat defined? Oh, it's in severaldifferent files. When it is alltyped and all the way down, then you canjust kind of click through and seeexactly where those styles are. So, inThat case, I do not mindimporting it. Even because, like the autoimport, I set up auto import with it. And if I just write a class of like bigcard or highlighted card or danger, thenit would just auto import for me. Ididn't have to really worry about that.And I absolutely love that. And I that’sone thing I don’t like about Tailwind isthatlike, if you want to reuse styles inTailwind, you kind of have a coupleoptions, right? You can create astring and you can just export thatstring from a file and import it everyeverywhere that you need it. Or, youcould what a lot of people do is theyll create a secondary, likecomponent. So, instead of like having a div with the class of likespecial on it, they would make a speciallike div component. And they would thenimport that. And then, and then I don’tlike that either because now, now youhave to make a whole, like, I just want toAdd a couple of styles to this thing. Andnow I'm having to like make a wholeanother component. That's a big pain,especially in like Svelte land where youcan't define multiple components in asingle>> You can. You can. That's outdatedinformation. You can do that. >> Now we can do that, right?>> Yeah. But, you know what? It'suhthis, this type of thing I, this is crazy. Like, my brain is, is like struggling withthis. But, this type of thing I think isdope. I, I, I like this, uh, in regards tobeing able to get thatcontrol. Being, cuz I, I, I did love thatabout styled components, where you hadthe wrappers and it just like workedlike that. But, I haven't found anyother style wrapper style of things thatwork well post styled components. So, Iguess I can get into importing CSS. Itjust has to be the right API or theright surface. And, maybe again, likeThis surface isn't for me. I have in allcapital letters, it is not for me, butit seems [laughter] like it is foragents. >> Yes. Yes. You know, you are, I mean, it'sJavaScript, too. And a lot of the stufflike overriding or anything like that,they're done inside of functions. So,you have, you know, overrides, you haveconditional styling, you havecomposability. And I love that aboutstyled components. When you could justexit out and go into JavaScript and dosome JavaScript inside your CSS. I likethat. The composability is a huge onebecause, like, with Tailwind, you got to likeuse some class acts or Tailwindmerge or something like that whereyou're like, "Okay, well, I have likethese base styles and now I want toextend them and override some of them."You got to make sure they're in theright order.You know what's really good at mergingand overriding properties? JavaScript. Objects.>> [laughter]>> Very, very good.Versus strings, fantastic for that typeof thing.>> Totally.>> So, that’s the pros.The cons,we obviously suck to write by hand.It’slike writing, especially when you get intolike writing nested media queries orlike pseudo-classes or a lot of the newlike, like sibling index, a lot of thenew CSS.Awful to write by hand, and Ijust can't do it. Like, the>> I have the syntax here for, like, definingor to like, modifying an existingvariable. It's just the amount of codeused compared to, like, "Oh, you need afunction that then has a stringinterpolation. You got, you know, anobject inside of there, and you're havingto pull out a property. Know, in normal CSS, you're just likevar hyphen hyphenyou know? The amount of change, theamount of code you're having to writethere is more, and that's like it’s ugly.For me to look at. It's hard,it's hard for me to look at, folks. II'm having a hard time looking at it. Iwanted to know about modern CSSproperties in this thing. One thing Ihave with Tailwind is that you kind ofhave to wait for them to implement, youknow, modern cutting-edge stuff all thetime, right? They, it's a DSL or it's asubsystem of CSS, so you've got to waitlike you can't just go ahead and YOLOthe newest stuff.I, I would assume that's the same withthis becauseeverything's in the JavaScript objectand it's fully typed. So,you know,you're going to be waiting for them toimplement>> here because like new stuff that comes. In CSS is simply just going to be like aproperty or a value. I think in somecases where you do havesome weird syntax, you probably arebetter offjust bowing out to like a CSS sheet.That's what I do in Tailwind aswell, where I'm like, "I could writeTailwind plugin for this and make somelike weird abstraction or whatever, butyou know what's easier is just justwrite some CSS for that." It That's andthat's fine. That's not like losing atTailwind. They might come out with likean abstraction on top of it that makesit a little bit easier to author, butthere's nothing wrong with just throwinga little bit of CSS in there. I guess itcould be wrong ifif everybody starts doing it, and thenit gets out of control.>> Yeah, for me it's a tough one. UmBut again, it's probably for most like99% of projects not a big deal becauseuh, sometimes I'm getting into someWacky stuff, and most people aren't. Andyou probably shouldn't, honestly. Yes. >> [laughter]>> Uh, nesting CSS. This is one thing thatkills me with most stuff isyou write, like, a selector, like a podcast heading, and then inside of that,maybe have, like, a span around, like, the podcast number, right?In almost all of theseimplementations, 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'sjust a span, it's either. In so manycases, I just want to nest a span selector inside of that because I knowthat's literally the only thing that will be applied to it. And I love towrite, not too nested, but nestedselectors inside of it. And withthis kind of stuff, you're every singleelement you're writing a brand newuh, selector. You're writing a brand newobject for it. I'm sure there are ways. To do it, but then like even with CSS modules, if you wantthe nesting to apply,it can get really, really tricky. Andalso with Svelte as well,you have to use the stupid globalselector on top of it. And I get why,but sometimes I just want to nest thingsinside. So, it's not that great in thiscase. >> Yes. Yeah, I, I, those are the thingsI have the hardest time with, I think.But then again, I will keepgoing back to it. It's not for me to author.If I'm using StyleX, if I'm going to usethis thing, I'm not going to be writingit by hand. I'll say that. >> Yes, I agree. Let's talk about somealternative here. Panda CSS. We've done awhole show on it. We'll link it up. Youcan go back and listen to that one.Panda CSS follows the same sort ofideas. However, they allow you to authorit either in a tagged template syntax, which IAbsolutely love because it's as, assimilar to writing CSS as possible. Um,or you can write it in the objectsyntax, which, um, is very similar tousing something like StyleX. So, that'sgreat. Like, they have figured out youstill get all the benefits of StyleX. Know?But you still can, you can use thetagged templates. Um, which is, is kind of the best of bothworlds. The nesting is still a problemhere, butthat's, I think, that's it, inevitably, whyI moved off of it because I wanted thenesting of CSS modules. But I think thatlike, if you're going from absolutescratch, Panda, it's a highly, you shoulddefinitely check it out if you'reconsidering StyleX. >> And they got cooler branding, so youknow,>> Panda.>> Yeah. They got yellow and black. It'slike very up our alley here. Yes. >> Love that. Love that.>> Yes. And they have the panda guy is kindof cool, too. So, you know, uh pros andcons here. One's got a panda guy, one’sgot a kind of like corporate logo. Uhbut yeah.>> [laughter][gasps]>> Yeah, that’s cool.>> Yeah, that’s cool.>> Another thing is that I don’t love thislike the spreading syntax either.>> Yeah, it’s ugly as hell.>> Spread, but>> Yeah.>> You can.>> You don’t have to spread, but you can,yeah. I just I’m just trying to have atime. You know, the one thing I couldget behind is if it’s a greenfield vibecoded project, it’s something that I’mjust straight up looking for. What’sgoing to give me the least amount ofissue with AI agents writing CSS cuzlet’s face it. They suck at CSS. Everything is justkind of done in the moment when itthinks about it, adds it, and then itmakes unmaintainable systems. And ifthis could fix that, then you know, I'mwould be reasonable to try it. What's going on? Oh, you're typing. I waslike seeing a bunch of errors flashing.Yeah.>> Well, let me show you. This is likea visual representation of howgood StyleX is, right? >> Describe it to the folks on audio. I'msorry.>> Typing styles.Uh, I can't spell styles. Stylesand like it automatically completesstyles: button, row, button secondary,card, content block. Like you're notsaying, "Oh, what was the class that Iwas using for button links?" It'sjust auto-completed for you, right? So,like dot button, dotand then here's all of the. Let mescroll. I can't scroll over, but nowIt'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, but if you're writing something that, if you want to author what it looks like to make it look good and then give that to your agent to reuse—that's a fantastic way to write your CSS. > Yeah. You know, it was the thoughts that are going through my brain, I don't like them.That is like, what if 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 StyleX.I feel like it would fit really well considering it's CSS-based components. >> Yeah. You know, it was the the thethoughts that are going through mybrain, 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 Itold an agent to make it into a nicelittle component library using StyleX. Ifeel like it would fit really wellconsidering it's CSS-based components.Oh, I don't like this. Yeah. >> If your whole hang-up to this is justlike, I like writing the CSS syntax,thenget over yourself.>> I can't. Yeah, I know. That's [laughter].Listen, I'm telling you folks, I'macknowledging that. I'm working onmyself here. I'm entertaining this. Yes. >> All right, stay tuned for the nextepisode where Scott is fullyStyleX-pilled and he's going to not stoptalking about it.>> If you've listened to the show at anyamount of time, you know that’s that’scoming, souh, yes.>> Peace., Why Everyone Is Moving to Stylex?, Syntax (Wes Bos & Scott Tolinski), 01m1h1fknyt4fkkv6pnv63frgh.