Facebook Did It Again

Facebook just launched another massive open-source project specifically geared at CSS and the goal of this project is to overhaul how you write CSS in a similar way to how react overhaul how you write your front-end JavaScript this library is really good for large scale Enterprise projects and in this video I'm going to be covering everything you need to know about this library to see if it's something you want to use and to see the benefits and drawbacks of it welcome back to web dev simplified my name is and my job is to simplify the web for you so you can start building your dream project sooner and this style X Library is actually really cool in what it does so if we kind of go through the history of CSS real quick just starting with like react when it first came out everybody was writing CSS just in CSS files importing those into your project and you had to deal with the Cascade overriding things and it was really hard to remove old CSS and a lot of times if you had too many classes and specificity problems it became hard to overwrite CSS as well this is why a lot of CSS and JS libraries came out and CSS modules became really popular because they solved some of that specificity problem and they gave you the ability to author more component-based CSS where your CSS lived in the same file as your JavaScript now there was a lot of problems with these approaches namely CSS and modules still dealt with specificity problems and it made it really easy for you to modify things outside of your scope of your component and generally CSS and JS wasn't the most performant and that's because it had to run all these calculations on the client to actually render what your CS s was then came along a lot of things like Tailwind CSS more utility focused and these are really great because there's no actual extra cost on the client to run this code since it's just normal CSS but the problem is is that it became difficult as your project scales to extend upon Tailwind CSS because it's really hard to overwrite existing classes on components that's why things like Tailwind merge and class variance Authority came out to try to solve those problems but it's definitely not perfect now the idea behind style X is to be the next evolution of CSS Beyond Tailwind Beyond CSS njs and kind of taking the best of all those different things and combining them together and I want to talk about what the Core Concepts of stylex are before we actually dive into how to use it so this thinking in style X page I'll link it in the description for you is a great way to read through and kind of figure out what the core ideas behind this are but if we just look at the table of contents it gives you a really good overview of what you want first we have collocation which just means your CSS is in the same place as where it's being applied this is very similar to tailwind and CSS and JS where your CSS is directly inside the components where you want it to be we look at the code example I have on the side you can see I have my Styles defined right here and they're being applied down below so it's all in one single place which is great now this is something that's already really well solved by things like tailwind and CSS and JS but these next concepts are things that are a little bit trickier to do for example we have deterministic resolution and we have type safe Styles so the key between these two is deterministic resolution means that you don't have to worry about specificity and that's cuz style X does not have any specificity at all it's always going to apply whatever the last style you put on your element is so if you specify margin in 10 different places whatever the last time that you specify margin is that's the one that's going to be applied so it's really easy to make sure you properly overwrite things and this is something a library like Tailwind merge tries to solve but it's just built into style X and then we have type safe style so everything is going to be typescript first it's written in flow and typescript so you have great type safety no matter what typing you're using and this makes it really nice because you have a lot of safety in regards to how you type out your code you know that things are going to work and it allows you to restrict people from passing certain props and so on which we'll talk about later in this video now the other main benefit to style X that they don't really talk about much in this table of contents but they talk about more inside the actual article itself is that it's really focused on performance and that's because while you write all of this code inside of react JavaScript whatever it is it can be used in any framework it doesn't matter you actually write it in JavaScript but there's a compile build step that takes all of this code completely removes it and just replaces it with CSS and class names so in the end of the day you essentially get the exact same output as you would with Tailwind where you just have HTML with class names and you have a a CSS file but you get the benefit of having all of this code in your JavaScript so you can get things like type safety built into it this is I think where style X really goes beyond CSS and JS because most CSS and JS libraries run on the client while style X does all of that building beforehand to give you the quickest page load time as possible now with all that out of the way we kind of know what the goals between style X are so let's try to figure out how those goals actually work in the implementation so we can close out of this and we can go over to our actual working code and you can see in this very simple example I have an H1 that I'm applying to styles to and then I have a button component and this button component is much more complex right now it's essentially completely blank but you can see I have the options to pass in things like a specific variant whether or not it's a large button or not and I need to style that button specifically based on those different props as well as maybe other things that I want to pass in so first I want to talk about just a really simple use case of how this is used because when you're using Styx there's really two main API functions you're going to use there's style x.c create which allows you to create all the different styles you want and then there's style x. props which just just allow you to apply those different styles to your element so this looks probably pretty familiar if you're used to like CSS and JS because as you can see we're creating different classes almost where I'm calling this a heading and I'm saying the heading has a color of blue I could add other stuffs inside here for example I could say my background color is going to be let's say black and now if I give that a save you can see it's a black background behind my heading element and I can do a lot of different things inside here for all my different CSS options for example I could add a margin of like 100 pixels now you can see there's a ton of different space around that element so I can do all these different things inside of here and I can even add extra Styles if I want for example if I wanted to add styles for like a paragraph or maybe I wanted to add like an active class I could do that and like the color here is going to be red for example as you can see I can combine all these different things together then whenever you want to apply these Styles all you do is you call style x. props and you pass it in whatever Styles you want to apply so in my case I'm applying just the heading style so you can see that my heading is this blue color cuz that's what I specified here now if I wanted to apply multiple different styles I could also apply for example this active style so I could say styles. active now you can see that my heading is actually red but how does it know what color it's going to be whether it's going to be blue or red because as you can see if you're in normal CSS the specificity for these would be essentially exactly the same but in style X it's always based on whatever you pass last so the last thing that I pass to this props is the thing that overrides my style and it just combines together all of these different styles so for example if I had here like a padding of 1 r on this heading you can see that that padding is still being applied while the active color is being applied as red and the padding is being applied from The Heading so it properly combines all these together and it always makes sure it applies whatever the last style is that you have inside the props so you never have to worry about specificity now the other important thing to note is that it doesn't actually matter if you're doing react view spelt normal JavaScript typescript whatever it is this Library Works in any framework you can think of because it's just normal JavaScript code so it's really up to you how you actually want to implement and use this inside your code I'm just doing it in react because that's the easiest for me to use because I teach react already now this right here is the absolute barebones most basic way that you can use style X and if you're just looking at this you may think that this is much more convoluted and complicated than something like tailwind and I 100% agree this is much more code you have to write than something like Tailwind but the benefits of this as your code grows becomes much easier because everything is in your JavaScript you have type safety you can share your code much easier and some of the more advanced features I'm going to show you in a little bit really make this shine when you come to Enterprise projects let's make our code a little bit more simple we'll just kind of bring this back to what we had before we just had a simple blue heading and now I want to move into the button to show you how we would do some of this more complicated code with styling a component so here we have a simple button component that takes in a variant of either primary or danger for like a red button and then we have a Boolean for is large so I can show you how this works with strings and booleans and any other thing that you can think of so obviously we want to create our Styles very similar to how we did here where we created some Styles so I'm going to say const I'm going to call this button Styles and I'm going to call that style X do create there we go and we want to make sure when we do our import here we actually import this as style X we want to import it as star named style X just like that that way we get our import properly working and inside a crate we obviously need to pass some stuff in here so I'm going to put my base Styles this is the Styles I want to apply to every single type of button so what I can do is I can just paste in some styles for example I'm removing the border the background adding a little bit of padding border radius and making my cursor the pointer cursor so now if I actually add these styles to my button by coming down here I want do that style x. props function I'm going to pass it in my button styles. Bas as my very first style and we just need to spread this out now if we save you can see that my button is showing up here it completely removed border background everything else and you can see that I have my cursor as a pointer cursor and I have some padding around the button now I want to actually apply the different styles for my variants so I have a variant for primary and I have a variant for danger so in my case I'm just going to call a variant style here and I'm going to come down and I'm going to call a Danger Style now you can name these things whatever you want you can have any naming structure but in my opinion this works pretty well for what I'm trying to do because these are the different kinds of styles I want to apply I want to either apply all the Styles in this section or all the Styles in this section so for these different variants I'm going to say here that my color is going to be white and let's set my background color here to be a blue color so this this blue color right here and now for my danger one I'm going to do essentially the exact same thing but my background color here I'm just going to make entirely red there we go so now if we give that a quick save you'll notice nothing is actually being applied to my button and that's because I haven't used these Styles anywhere so what I want to do down here is actually apply those different styles so what I can do is I can say my button Styles Dot and I could say dot variant and if I change this to actually say primary because it should say primary instead a variant there you go you can see if I use primary down here that is changing my button to Blue if I use danger you can see it changes my button to that red color and if I want to use this variable to determine which one I want I can just come in here and use the simple bracket location pass it in my variant and now by default the variant is primary but if I pass in a prop here to say variant is equal to Danger you can now see my button has changed that red color again if you're looking at this code you're thinking well this is kind of more complicated than just normal plain old Tailwind would be and you are correct but as you start to get more and more complexity added into your components it becomes easier to write this with style X and the real key here is even if it's not easier to write it's much easier to read and maintain than Tailwind because changing complicated Tailwind code can become incredibly difficult especially when you have to deal with merging of different things and conflicts between Class names so now what I want to do is I want to cover this is large section as well so let's add in a large one here and this will just be font size is going to be two R we're just going to double the font size here so now we can even apply those classes so I can say if is large is true then what I want to do is I want to apply those button styles. large there we go so now you can see if I pass in this large prop so I think I called it is large there we go you you can now see that my button is much larger we'll remove that cuz we don't really need the button to be that big but you can see I'm just applying these different styles one after the other and it's constantly just adding and merging them together now if I for example had some type of Border or background inside my base that would be overridden by these primary ones here as we saw with the heading example but in my case I just don't have a border or a background for the bass style now before I dive into some of the really cool features with style X I do want to talk about one thing that's really cool about this that you can't do in pretty much any other Library out there even normal CSS makes this difficult let's say that for example I want to come in here and my border radius is25 em but on my primary one I actually want to remove that border radius well what I could do is I could say border radius is going to be zero and that will work that'll technically remove my border radius let's move it down to the danger one so as you can see that border radius has been removed but sometimes it's kind of difficult to actually make sure you default this to whatever the browser default value is and instead what you can do is you can just pass in the value of null and what that's going to do is it's just going to completely remove remove any styles that you've already passed in in previous elements so maybe I don't want my border radius to be zero I just want it to be something else I want it to be whatever the browser default would be I can just pass in null here and it's going to take care of that for me essentially null just says completely remove this style from everything that I've used it in before but if for example inside of my large one I now want to add that border radius back in I can say border radius is going to be let's say5 RM or something like that now if I give that a save you can see right now my border radius is removed completely because in danger it is set to null but if I make this a large element you can now see I have my border radius back and the reason that this border radius is coming in is because first my button style base is setting it to 0.25 em then my button style variant which is danger is removing it and then finally my is large is being added back in which is adding this border radius so it's constantly changing what the Border radius is but it's only going with the last specified value so this is a really great way to be able to remove specific values that have been set in the past now obviously I don't want this so we're just going to get rid of this to bring our code back to what we had before and we'll get rid of the large so our button is at least a normal size now one thing that is really hard to do in Tailwind without something like Tailwind merge is how do you pass in custom styles for example I want to pass in some custom Styles into here and these custom Styles I'm going to apply to my style X section here and I'm just going to apply it at the very end just like this I'm going to say Styles now this Styles is actually a type safe thing that we can add so I can say Styles and I want this to be from style x. Styles there we go so this is just specifying that I have a specific style that is from this style x.c create so this allows me to pass along my own custom Styles so I come into here let's say I want to create a button style so I'm going to come in here and also I should probably make this style optional in my type because I don't need to pass this along there we go that will get rid of our errors so I'm going to pass around a button and this is going to have a background color of green just super straightforward so what I can do inside of here as I can say I'm going to pass along my own custom style which is just going to be styles. button and now my button is green even though I have this variant of danger being set again it goes based on order and since the last thing I pass in is my custom style it overwrites everything that I had before what happens if I don't want to allow them to set a background color inside of these custom Styles because it's already taken care of in the variant so it shouldn't be something they can pass in that's a custom style well what I can actually do is I can specify the exact Styles they can or cannot apply for example if I only want them to be able to apply the margin style I can come in here and I'm just going to say margin is a string it's going to be an optional string and that is the only diff property that they can actually pass along now you can see we're getting an error inside of here cuz I'm trying to pass along this background color style even though margin is the only one I'm allowed so if I specify margin for example 10 pixels and I remove background color you can see now all of my prop errors go away you can see that margin was properly applied I can make it even larger so you can really see the button is pushed way down here but as soon as I try to add something like background color in I immediately am getting an error now instead of specifying an exact thing like they can only pass margin what if I wanted to say they can pass everything except for background color well I could just come in here and use the without option instead and now I can pass in background color and here I want to essentially make this a type of unknown there we go so now if I give that a quick save it's going to give me an error only if I try to pass a background color so as long as I pass anything else it doesn't matter what it is if it's margin for example 10 pixels here I could pass in padding of 10 pixels that's going to work just fine but I just cannot spe specify background color as soon as I add the background color into here and I try to specify this as anything I'm immediately going to be getting an error inside of my code as you can see I have this error right here so this extra level type safety is incredibly nice I could even go so far as to say let's say I want to allow them to only pass in the margin and I only want them to be able to pass in specific values for the margin such as 0 2 or four so now the margin can only be these three specific values so if I come in here and I try to pass in any anything other than those values for example I try to pass in one I get an error but if I pass in two you can see the error goes away now these are some amazing benefits but some things that make this even better is how it deals with things like media queries and pseudo classes and so on for example right now our button doesn't have any hover State and obviously should so for now what I want to do is I'm going to remove this custom Styles typing so it's just going to be normal they can pass in any Styles they want that's perfectly fine and now what I want to do down here is I want to specify what my background color is like on Hover what I can do is here where I pass my background color I can pass it in object and I can say that the default value is going to be what I had before that 00 a a FF and now on Hover I want to specify a different color so I'm going to come in here with a hover and let's just say that I want this color to be black so now if we change my button back to a primary button so we can see how this works when I hover this you can see my button now changes to Black on Hover I can do the exact same thing for Focus so I could say Focus within change that to black as well so now if I tab onto the button you can see I get that exact same black coloration showing up and I can do this for anything and I can even Nest these as much as I want to for example I could put media queries inside of here as well so for my background color let's say that I have a media query where the prefers color scheme is going to be dark well now I can specify let's say now that the background color is going to be green it really doesn't matter and if I make sure I put an at in front of here so it's an actual media query now what I can do is I can inspect my page and all I can do is I can just click this button to change my prefers color scheme to dark and you notice the button automatically changed to Green when I'm in that dark mode and it stays Blue when I'm not inside of that dark mode so it's really cool that all these different features can work together and I can even Nest them further for example what I could do is here where I have the green I could go a step further and say you know what I'm going to have a default which is going to be green and then I'm going to put a hover inside of here so now I have my own hover inside of this media query and in this case I'm going to make the color something else like let's say lime for example so now if I inspect my page I'll change it back to that prefers color scheme dark and when I hover you can see it immediately changes to that much brighter more obnoxious green color and the great thing is you can do this with any media query you can do it with supports properties and so much more and if you want you can even extract this out into a variable we'll call this variable dark and I can just come up here and say const dark is equal to this variable and it makes it so it's a lot easier and reusable for your different media queries that you have now the final thing that you may be noticing if you're looking at all this that Tailwind does really well that so far style X doesn't is it has a really good built-in design system for example your padding can only be specified as like padding zero padding one padding two padding 4 you can't just come in here and manually specify your padding as like 0.5 and a bunch of decimal places because doing that makes your app inconsistent and as your application scales having a strong design system is really important but stylex has actually thought of that and they have their own idea of implementing essentially your own design system directly inside of it by creating something called variables these variables work pretty much exactly the same as creating a normal style but it's a style that you can reuse anywhere you want in your application so what I've done here is I've created this style x. Define vars function and I've passed it in a primary color which is going to be this blue color and on dark screens it's going to be this greenish color same thing here with primary dark it's just going to be a darker version of blue and a darker version of green I've also specified this border radius down here as well now to create these the really important thing is that they must be inside of a style XTS file as you can see my file is called tokens stylex dots or JS or whatever the file is actually called now the reason for this is because what it does at compile time is it takes all this JavaScript code and it just converts it over to CSS variables so if we want to implement these variables what we can do inside of our button for example where we have B border radius is we could just say that we want to do our spacing Dot and we want to get our border radius from there and that's going to apply that border radius property to our button we got that right from here I can also get my colors variable and I can apply all the different colors I want to for example all these different default fields and so on I'm actually just going to paste in what the final version of this would look like as you can see here in our default style we have our colors for the primary color hover we have our primary dark and on Focus we have our primary dark color the really cool thing is since our Styles inside of here are already taking care of a dark and light mode for us it's actually pre-styling all those different things for us so we don't have to worry about adding in our own dark and light mode cuz it's taking care of a for us right here with all these different media queries now you will notice in development this has actually made my button disappear this is because there's a bit of a problem right now with how I have style X set up inside of V but if I actually build my application we can see what the final version looks like and if I drag this over this is like a built finalized version you can see we have my button right here it's currently a large button and if I inspect my page and I change to a dark theme you can see I now have a green button that gets darker when I hover over top of it and the really cool thing is if I inspect my page and I look at the actual sources tab so we can go to the sources and we can look at the CSS if I open this up you'll notice that inside of here it's just a small CSS file and it's usually mostly CSS variables you can see all this code at the very top is CSS variables that are being defined for all the stuff that I have in that defined variable section and if we look at the actual button element by opening this up you can see it just has a bunch of different class names being applied to it that are automatically created before the page actually gets compiled so this is during compile time there's no JavaScript that's running to assign these classes it's just assigned for me and then my CSS styles that are created take care of everything else now if you wanted to have a dynamic style that is something that is also supported for example if I wanted to come into here I could create a dynamic Style by just coming down I could say Dynamic it could be called whatever I want but the key here is that this just must be a function and now I can specify whatever I want and I can take in like a value from here and then I can specify for example my opacity is going to be whatever that value is that I pass in and I just want to make sure I return this as an object there we go so now I can actually use that Dynamic thing down here for example I could say button styles. Dynamic and I could pass it in a specific value by saying like 0.5 for example and and now that's going to set my opacity to 0.5 now to actually show this working I'm just going to get rid of a lot of these styles that we had set with the tokens that way we get rid of that if we come over to here you're going to notice we're actually getting a bit of an error this is because of how early access this kind of thing is if I actually want to make this work instead of doing a return here I must actually do this as an inline Arrow function for the compiler to actually recognize this so now if I do that and I save you can see that that is worked if I changed my app button here to be the danger button you now notice I have a 50% opacity I could change this to. 25 now it's even more transparent 75 it's less transparent and this is something I could even take in through the props by passing in my opacity like this and then I could use that opacity down here so I could just say opacity and then if I come over and i' pass in opacity let's just say I pass it in as .5 you can now see I have a 0.5 opacity button showing up the only reason I'm getting these errors is because of typescript so if I added that into my typee here opacity which is a number you can now see that should hopefully get rid of all those different typing errors and this is something that's Dynamic so you can change it using state or anything else you want so you have the ability to have Dynamic values while also having the power of statically compiling everything beforehand for performance reasons now there's even more great features inside of here such as the ability to create themes and do more complicated things with your Styles and so on but this covers really the majority of the things that you're going to use inside of stylex and I really think it could be a great alternative to something like Tailwind especially on larger scale Enterprise applications I mean the entirety of Facebook has been written in style X and they've been able to make great improvements in reducing the size of their CSS while also making it easier to write and change in the future now I really hope this library has you interested in trying out CSS again and if you want to learn to really Master CSS I highly recommend checking out my learn CSS today course it'll be linked down in the description below this course covers everything you need to know about CSS and it can be applied to Tailwind CSS stylex or any other CSS library or framework that comes out is just plain CSS and teaches you the Core Concepts you need to understand so if you want to take your CSS skills to the next level I highly recommend checking that course out Linked In the description below with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 400,535

Keywords: webdevsimplified, stylex, css stylex, css tailwind, tailwind vs stylex, stylex tutorial, stylex what is it

Id: dphmbB77W_4

Length: 24min 10sec (1450 seconds)

Published: Tue Dec 12 2023