Facebook's Tailwind Killer Is Now Open Source

a couple weeks ago I did a video about stylex Facebook's new style solution meant to compete with things like Tailwind that video did surprisingly well and I think it did well for good reasons the Facebook team and all of meta have some of the most complex problems that you can possibly have when it comes to styling your applications I think the solution they built here is truly unique and exciting so why are we talking about it again well they just open sourced and with that open sourcing they rebranded a bit and rebuilt the website based largely on the feedback and thoughts that we had in our last video and I think it's only fair to take a look at what's changed and try to better Express why I'm excited about stylex even if I won't necessarily be using it so why would I ever consider this thing over Tailwind well first and foremost composability this is the style system that Facebook uses to power everything from facebook.com to Instagram and it thinks about things a little bit different other Solutions have been focused on what does the actual ergonomics of writing every line of code feel like stylex is much more about how do we compose and scale these Solutions over time how does the design team build design system without also providing a component library and allowing us to adapt this as we need where we need to I think a lot of this communicated really well in their thinking and stylex previously this page took way too long for me to get to it was near the bottom even though it's the most important page because of just how different stylex is and they actually redid the homepage killing all the examples just to give you a quick get started and thinking in stylex quickly show you guys the getting started it's pretty simple you import their compiler which is key Styx is compiled so even though it looks like CSS and JS it isn't it is putting in class names it is making real CSS it's just doing that with the ergonomics of CSS and JS so you define a style using style x.c create and this defines what the root element is it's a with 100 and then these parts and when you want to use that you import it somewhere else so here we've created a couple different styles now they're exported I can use them other places like div and you dump style x. props and you pass it whichever of the stylex things you want to pass it and it just works works it's really really cool way of writing in your JavaScript objects that represent how your Styles should behave and then implementing those in your component Library composing around them and having a lot of that configuration and like lower level control we would expect from something like Tailwind or styled components without having to compromise on either putting everything in a string or doing everything in JavaScript is a really really nice balance that in particular for the composability makes a ton of sense would I recommend this in a solo project or even a small team probably not but if the team that's making your style system and the team that's implementing with it are different teams something like this makes a ton of sense for helping you build and Define the system that those different teams communicate with both because it is a really well encapsulated style system but also because that encapsulated system is incredibly composable this is where their Hut takes start to come in and I really like the core principles and how it describes those Hut takes the first point they push is collocation they don't think your CSS file and your HTML file should be these separate things that don't touch because it makes understanding how these things interface much more complex and it also means it's harder to statically analyze what is being used or not being used if you define a bunch of Styx classes and never use them they just get dropped because there's a compiler step there and a lot of those types of things can't happen if you don't have collocation it makes it so much better to see in your file what's affected by the changes you're making they also have deterministic resolution as a core principle CSS is powerful and expressive however it can sometimes feel fragile more than Sometimes some of this stems from a misunderstanding of how CSS works but a lot of it stems from the discipline and organization required to keep CSS selectors with different specificities from conflicting the solutions we've had forever for this are crazy rules and conventions like bem and OCS which are just crazy ways to name your CSS classes so there's less likely to have conflicts there's also utility classes like Tailwind where you have very very small classes that do as little as possible and you apply a bunch of them to an element obviously that's the direction I've went in and I really like it but once you get into defining style systems that becomes less and less valuable Styx aims to improve on both the consistency and predictability of styles and the expressive power available we believe this is possible through build tools this is another one of their big beliefs is that this is a problem that should happen it's a build step not a thing that should happen in your runtime or in your CSS world this should be able to be done via plugins at build time to generate the correct output for your application and the completely predictable and deterministic style systems again really important when you're working at the scale of meta where you have the style system in this package that maybe the person who made it hasn't worked at the company for 2 years now and now some other team needs to be able to consume it and have it work the same way it worked in three other places and it does because it's a really well-built focused primitive and lowc cost obra is another really important thing they want to make sure these abstractions don't have a runtime cost the same way something like styled components does because those now have to run in Java script to apply Styles correctly whereas this is spitting out a CSS file when you write this Styles stylex create red and then you apply this this is a CSS output you have the JS and the JS output now has a equals class name this and this class name represents this class that it generated here really cool people in chat are saying it's react native like it's absolutely inspired by how they did things in react native it's trying to take what react native did for Styles and make it both work and bring value to other places specifically by like making Cascade not really a thing another big thing is using Styles across files you should be able to import from stylex stuff in another file and have it behave properly and for that to work they have to execute style x. props calls at runtime which works great now that we have these styles that have been compiled in they are still yes in the JavaScript code but they can be applied much more quickly and also default to other behaviors and classes if you put those into so it's always able to compile down to effectively a string usually a CSS string but in line if it has to be for dynamic behaviors really cool stuff they also made a very small API service if you noticed everything's basically Styx create or props they're not trying to introduce a bunch of new stuff for us to learn the same way something like Tailwind did I think Tailwinds encourage me to write code better because of what I've learned from it but having one solution that everybody who already knows CSS can understand quickly is a massive win as well and this also comes with types safe Styles because you know the types of all the Styles because you wrote them in JavaScript and it's all type safe code so you can infer which keys exist on a given style and you can make sure you're not conflicting things you can make sure you're importing things that actually exist that the background color is actually there before making weird runtime level mistakes really really powerful they build it in flow with strong static types which is great but as they say here the package also has typescript definitions which is huge but I want to get to some of my favorite pieces they're still more here like sharable constants really important to have like color variables and things that could be shared trivially as well as being framework agnostic a lot of people seem to think that Styx was react only but it's a CSS and JS solution not CSS and react as long as you have a way to run that build step this will work for you but this is the part I really wanted to get to encapsulation all styles on an element should be caused by class names on that element itself CSS makes it very easy to author Styles in a way that cause Styles at a distance like class name the star hover behaviors affecting the first child these types of things super unpredictable I'd even put margin in this category because of how these things affect the stuff around them and Below them rather than just affecting the element you're targeting itself that's one of the major goals they have with stylex is moving away from the cascading side of CSS because it doesn't work great at scale you end up running into really complex issues because someone on some other team from years ago has some weird CSS like value they put in where they target the first child of an element that you own the element but you don't own the parent container with it it gets so an an knowing both to identify where these problems are coming from but then to fix them and prevent them from happening again if every element has its Styles encapsulated you're much less likely to have these types of problems and I like that they have went out of their way to prevent that type of issue because it's thing I still run into even in much smaller code bases Styx this allows this entire class of selectors this currently makes certain CSS patterns impossible to achieve with stylex our goal is to support these patterns without sacrificing style and cation I love this so bold complex selectors suck and they just making them possible in JavaScript without making your Styles impossible to maintain and again that's a huge Focus for them readability and maintainability over terness love that they have built something truly unique here a few more core points again you can watch my other video if you want me to go in depth on why I think all of this is awesome you actually watch my mind slowly get blown as I realize how aligned we are they called that the modularity and composability the avoiding of global conf fig one small file over many smaller files this is actually a really interesting one when dealing with a large amount of CSS lazy loading is a way to speed up the initial load however it comes at the cost of slower update times or the interaction to next paint lazy loading any CSS on a page triggers a recalculation of styles for the entire page Styx is optimized for generating a single highly optimized CSS bundle that is loaded up front our goal is to create a system where the total amount of CSS is small enough that all of it can be loaded up front without a noticeable performance impact and that's not just like load all of it in one small file for your side project that's load all of it in one file for Facebook that's insane they went pretty Ham on that I think single CSS files are still one of the best ways to handle it for all the reasons they listed here almost all the projects I ship have the single CSS Tailwind file that has all the classes that are used in the app because loading that one CSS file makes your interactions to new pages that need different styles much better if all of the styles are already included it's so nice seeing one of the few instances of people in CSS and JS land talking in reality because if you don't go this out of your way if you don't make these buildups if you don't do this stuff and you just run your CSS and your JavaScript everything kind of sucks and this is such a unique and exciting balance that they have found here I'm actually really hyped I'm not just hyped that it exists I'm hyped that I can go read the source code even if I have to write a bunch of flow to do it not excited about that part but I am excited this is open source thankfully I already got it started because this is blowing up fast and I see a future where stylex is very well adopted especially amongst bigger teams and companies obviously I'm sticking to Tailwind that's my bread and butter that's where most of the work I do fits Best But as soon as I'm starting to build style systems that are to be consumed outside of my work as soon as I'm building things that other teams might need to use I think stylex is one of the most compelling Solutions in the industry right now what about you how do you feel about Styx I know it's a little bit different especially as the big Tailwind Channel but I do think what their building is compelling and I am excited about it I put it in the same bucket as something like HTM X where it's not necessarily for me but I'm really happy it exists because it keeps people from using something that isn't for them what about you do you see yourself using Styx or are you going to stick with tailand I'll put a video in the corner where I compare a bunch of different CSS Solutions if you haven't seen it already and whatever's below it YouTube seems to think you're going to like appreciate you all a ton as always I'll see you in the next one peace nerds

Channel: Theo - t3․gg

Views: 100,279

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: v4HkkjXmEMM

Length: 11min 17sec (677 seconds)

Published: Thu Dec 14 2023