Panda is better than you think

hey there the recently released a video in which he reviews My article about my first impressions on pandas SES in this article I compare Tailwind CES The Styling solution I've been using for years with pandis a resin styling solution I first tried to build exate by example today we are going to dive into pandas more deeply some criticism that to made are often made by people just discor pis and we will look at them closer to determine if they're relevant or not Alexander St the co creator of pands helped me a lot to prepare the content for this video I'm raring my best witchard and we can start it looks like this oh oh I'm not going to like this I'm not going to like this at all one of my least favorite things anyone ever did to Tailwind was this awful thing called attribut Toy Mode I hate this it it entirely destroys the thing I was just describing with Tailwind about the Zen mode because now I have to press enter now I have to remember which key is which now when I'm like reading through I have to remember which part I'm on like is this BG or is this border you don't have any guarantee of order because it could be top bottom left right anything I hate this I agree that having a better context when you're reading through your classes is nice and knowing where things are is important but that's why the Tailwind prettier plugin that auto sorts the classes is so good because they're always the same order so you don't have to worry about it it writes the Tailwind for you by making you press the enter key more the fact that you have to press 15 symbols for everything you want to do we all agree that pressing underscore pressing Colin pressing quote pressing comma pressing enter pressing all these things is worse than pressing any of the keys near the middle of your keyboard or space bar right like we all agree with that because the amount I have to maneuver around the keyboard to apply a background color a border and a font size is absurd few doesn't like that you need to create big and nasty objects to create styles with pandas it doesn't look good for him that you need to create big objects amongst many lines to add a background color a text color and a font size it also points that there are too much characters to type and those characters are specials you need to write colums and commas a lot with panda CSS you write your Styles in types save functions which allows your cut to autocomplete the name of your properties for instance I never type font size or font via numeric myself I let my codor autocomplete it for me if I want to set the font size on this element I'm going to type FTS and wait for my codor to outut complete the name name of the property then I select the value I do the same if I have a font varant numeric property I want to apply font variant numeric and with a few characters you get the correct Auto compilation the same rule applies for values if I want to set the text color of this element I'm going to type color hemp 100 and it will to complete to H 100 I do the exact same thing when I'm developing with Ted win SS I wait for the Ted win CSS extension for vs code to complete the properties and the values the only difference there is that penda CSS relies on the typescript language sh of your code editor when twin requires you to install on your code editor a specific extension with panda CSS you can group your styles by pseo selectors you don't have to necessarily repeat hover first 10 times you can group all of them on a single object let's see what PH thinks about this you can group styles by conditions large for large breakpoint or by property wait or you're winning me over looking back at this because large here makes this very different I will say it is Panda's fault for me falling for that because one of these is a subgroup of targets so in this case we want the background color to be base 50 Gray on Hover to get darker this is a subsection of different style things I would want to apply if you are a Tailwind user this is the thing you'd put for the first two characters at the start of your Tailwind call this is a viewport selector these are two very different things and having them next to each other like this makes it very easy to skim over and not realize that this is is an entirely different Behavior than what this is these are properties these are media queries they shouldn't be the same index level you can convince me in Tailwind that media query selectors aren't great especially the idea of doing things in groups like that the auto sort helps a ton here because if you have multiple things prefix with large they all get bumped to be in a group together but you could also convince me something like Tailwind helper equals this where I have LG colon BG gray 200 Flex Flex column and different behaviors where you have this helper this G be part of tailan merge where you have the media queries out as the keys and then the value is the properties but having the the keys intermixing properties and media queries makes it so I can't really rely on that the other scary part here is that the order can be changed and you can do really nasty stuff that makes the code riew here miserable like you can put this there that's Cur this just got this went from perceivably easier to review to significantly harder to review with that one small thing theoretically a preier plugin could force that these are at the top or the bottom which is where I'd probably want them at the top so they're clearly called out there but if you're using these I would want it to have to be under some other key like here's what I would do have default I have this always apply or even bass might make more sense for this but this being at the same level I hate this F doesn't like that the bigy CSS property and the LG breako are defined at the same depth level in the object he is scar that it could make the CSS harder to understand phasizes that with the plugin prer for terwin SS um styles are ordered and even grouped which make them easier to understand and predictable F says that he would have preferred a ray with Pand SS to declare the best style the medium style large style Etc Panda CSS is flexible and you can group Styles in many different ways you can group styles by the style property we have the background we set the base style the hover style and the focus style you can as Group by conditional sty we have the focus group which defines the PG and the font size we also have the hover Group which defines over Styles we can mix both we Define the BG the focus and the hover style for the BG and then break points SM and MD where we Define over Styles even the hover style for the PG when we are on a small device honestly I never wrote something like this it's possible with P SS but it doesn't mean you need to do this so it's up to you to which this state and yes it's possible but absolutely not recommended F mentioned that he would like a way to group the best tiles in a single object and it's available in P CSS you have this base property you can wrap all your base Styles in that and yes it works in PSS this are matter of taste what really matters as F says is what you use automatic tool to unforce your cutting Styles Twin CSS has a vs code extension and a pretty plugin the Punda team has recently developed a plugin for prettier and Punda it sorts your Styles if I go back to my playground and set fun size of two Exel a position absolute and a display Flex if I save the file you can see that properties are ordered by the prettier plugin the panda team has also developed a nearest L plugin the objective is to spot the Mis usages of panda CSS and warn you about them for instance if I set a color and I don't use all the specific colors defined by my configuration of penda if I use for instance this it will want me and it will tell me to use a color token that is valid in the video F talks about how the wi CSS detects which Tes you use to generate the CSS only for this it reduces the bundle size of your CSS how to window this is by searching for the exact class name as strings in your code base so if you have this code in your tawin application it won't detect no generate which size you want to use because color his is dynamic Del SS won't evaluate or pass your code it just searches for strings on the other hand Panda CSS uses the static extractor which transforms your code into an abstract syntax tree an a it is able to determine which St you use in a more powerful way for example Panda s supports B in the CSS function we Define the color and based on the runtime is selected State we either apply the blue 500 or the yellow 500 color and because your code is transformed into an abstract syntax tree Panda CSS is able to generate both text colors for blue and yellow it can also support this in the CSS function we spread the base object which references the colors blue here and again based on a runtime state that is selected we either spread selected object defined there and using again the colors object or res spread this static object this doesn't look really static and pandai is still able to do it the rule of thumb with the static extractor is that if you can you identify what will be the value of a property then penda will be able to you shouldn't leave the file because the static extractor remains on the file the CSS function is defined with Punda CSS remains a build time CSS in Gs solution so don't expect it to work with two runtime M Solutions you can always use a CSS variable if you need some runtime value you to become Styles F wonders how we could share styles across cvas this is nice that there's this level of like deep variant behaviors built in where you can still use these chunks my question would be how much composability exists here like how easy is it for me to define the color in BG as a like a value that is type safe and then use that in multiple CVA variant sets in different places P set supports two types of tokens core tokens like color spacings other available in win SS and semantic tokens semantic tokens are meta tokens that reference core tokens and can have conditions like for the f a sematic token is able to reference a certain C token on the light fil and another C token in the dark fil droids is a design system of data dog and they Define some colors like UI background UI background secondary UI text UI text secondary if we switch to the dark mode you can see that the name Remains the Same but the color has changed this is because if they were using PSS they would be using semantic tokens to reimplement this colors from droids we need to go to the configuration of penda Define the them semantic tokens we can Define the colors there are other types of semantic tokens we can Define like animations borders Etc we need colors I will Nest all of these tokens under the UI property I Define the background semantic token which has a default value to when we access UI background this is what will uh happen so the base value for the light mode is white and for the dark black mode it will be a dark gray same for the secondary light gray dark gray and for the text is the opposite so a dark gray for the light mode and a light gray for the dark mode in the react code we have this theme management if uh we apply this theme very to the elements it would be said globally in the real project to the HTML element like with tailwind and then we can Define the B with UI background we can also use secondary the result compilation there and for the text um we use a color property and UI text or UI text secondary which is your for Buton and this renders this result so this is a dark mode this is a light mode the code doesn't change so this is not in the view that we manage um the switch between the dark mode and the light mode for the colors is designed by the design system it's chosen by designers and implemented with panda CSS thanks to semantic tokens few doesn't like that you can use your Styles as GSX components and you just grab this by using their style helper wait does this just create a component with styled no is this styled components no you don't have to do that just make me apply this as CSS don't no I hate this so close so close they had me until you have a weird Syntax for defining jsx H we were so close guys pendas sis has j6 support which means several things the first one is that you can use a style function to create HTML elements like a button and style this button with j6 properties like PG color and Etc contrary to what I said in my blog post you don't necessarily have to create a CV first before creating a chss component from it you can directly use a style function define a button in this case the base ties varant Etc and you can use the button component specify the variance and you can even overwrite Styles like margin top this where to override Styles is optional you can configure it and if you don't want to be able to override Styles you can disable this property I can understand that you might dislike this feature people coming from Shakra or F we like it because this is what they are used to use this feature is optional and it is disabled by default by default there is no GSS involved this is something you need to opt in P CSS supports the generation of components for react View Creek solid and a lot more of Frameworks and yes you can use it however you want in your project or absolutely not contrary to what my article suggested you can use CVA without any gs6 involved you can import the CVA function define your class viance Authority with the base Styles the viant and then use the up page CVA um to return return classes names so you apply the viance you call the function and you get your CVA without any GSX P CSS comes with a lot of utility functions to solve common layout problems like cycle htac grid Flex you can import them from the pattern file you can use a v stack pass some properties like the Gap and you get a vertical stack you can import the grid specify the number of columns the gap between each column and row and you get a CSS grid if you enable the GSX mode in your project you also get this patterns as components you import them from the GSX file and you get stack Circle grade Flex you can then use them as a foundation for your website and style those components through properties few doesn't like the verbosity of slot recipes a car SVA it feels that they will become nasty and deeply nasted objects which are just un enabled I once again have feelings this feels like it would get really nasty in the nesting really quickly and again I don't think everything needs to be done in an object when it could be done in markup like this yeah this is what's kind of confusing to me like how often would you reuse this this recipe I feel like if I wrote this it would be for one component and all these things would be applied in that one component at which point I would be just as happy with three of these one for root one for control one for label that are way less deeply nested and way more readable I would personally much rather scroll up and down to these different element types to see how they're defined in the different conditions than to blend portions of them so deeply together like this I agree that slot recipes maybe of kill for most cases however the true power is when you have several slots and some compound varant I found an excellent example on Terin viant which Implement slot recipes so on the documentation of Terin varant we can find this slots with compound variants we have this allert components which has two viant severity and viant severity is either success or error or and the varant is either filled or outlined you can see that the color changeed there and obviously they also change um due to the severity they implemented this like uh that so TV T variance they Define some slots the road the title The Message the varant are varant and sity either outline fil and error of success and here are the compound variant so if the variance is outlined and the severity is error we need to set a bunch of classes to the road the title the message and all these classes change based on the combination of these two viant so when you need something like a cross product for this varant uh compound variance this is their name I think that SVA are an excellent way to implant this honestly I don't think there would be a better way to do this following the rule that everything that changes together should be kept at the same place I think that slot recipes are the best tool to solve this problem obviously you don't need to use slot recipes for everything and everything doesn't have to be a slot in the slot recipe for instance for this checkbox which has a road control label um I don't want to make this hidden checkbox a slot in the SVA uh if it's only to set s only to true I might better do it outside of the svm as every feature that Panda SS supports you don't have to use slot recipes many users of panda SS will use it for years and they would never use slot recipes it's absolutely not a problem you can use what you want from this Big Tool Box that pands is and be fine with it flexibility is never a problem for a tool if it gives a simple and straightforward path to beginners the team behind Panda CSS has understood this criticism about too much flexibility and is working to solve it first there is now this ESL and pretio plugins they make it way safer to work in teams with pandas second there will soon be a lot more of optins in P SS you will have to op in for more advant features instead of them being the default if you like the Simplicity of 10 win SS and don't want to use more advanced features like CVA and SVA you can just use the CSS function and benefit from the Str types the merging Styles Fe and the Advan static extractor thanks for watching but before leaving me I want you to go to the documentation of pandas it's well written and it contains a lot more information than what I can give you if you want to judge Panda F you need to go to the documentation most of the Cod sampol you saw today come from the documentation the creators of the library make an excellent work to help people use Punda effectively and thanks to you f for having made a video about my article I am most honored thanks to Al St for his help on this video and his hard work on pandus so bye

Channel: Baptiste Devessier

Views: 6,284

Keywords:

Id: 55DUCqUS4qM

Length: 23min 36sec (1416 seconds)

Published: Fri Mar 08 2024