002 — Style and Error

Hey. How's it going? This is Ryan Hefner, and this is the All Play podcast. So I wanted to jump into something that also has been a little bit of a debate. This is kind of piggybacking on my last, episode regarding, you know, choosing stacks.

Is actually choosing, what kind of, like, CSS or styling framework or whatever that you end up wanting to use on your projects. So over the years, you know, I've used everything from, what was it, styled module or CSS modules to styled components to, obviously, just rolling your own CSS stuff. And, you know, I'm I'm primarily talking within the, the React world as far as just building front ends, in React and then choosing styling, systems there. And then obviously, previous to that, using a bunch of, like, other Sass or post CSS stuff. And, you know, I think there's pros and cons along the way.

Over the last 3 or so years, I've I've I guess I've been primarily using Chakra, which is a UI kind of like component library, and it has a theming system that's based on style system. And I guess, you know, in a in a weird way, it's probably a little bit overkill for for the majority of stuff that that I'll be working on, but at the same time, it is nice to be able to reach for certain things like menus or modals or accordions and and that kind of stuff and and just have a consistent way of applying styles or overriding styles, depending on, the context and what you're working in. But, actually, recently, you know, I know that they've been doing lot of work, as far as, what's the what's the next evolution of chakra, and I think they're also trying to get away from using emotion, as far as, like, their underlying CSS handler, whatever you wanna call it. And so with that, I was like, okay. Well, maybe I'll, like, play around with, you know, some of this new stuff that they're doing.

So they have a project called Panda CSS, and then they also have Arc UI, which is basically like a headless, UI system. And then there's a a third kind of library that that has been put together called Park UI, which basically it takes Arc UI and all those headless components and then allows you to then kinda marry that up with either, Panda CSS or Tailwind. And, you know, I think, you know, and I guess I I should also say that, over the years, I have also worked on a few tailwind projects. I I can't say that I've really worked on a lot. The and so I'm gonna go into, you know, some of the pros and cons of of of, I guess, these streak I'd almost call them at, like, 3 different systems.

I think you have chakra, which, you know, really allows you to do a lot of high level configuration, out at the theme level. And then you can also obviously sprinkle that stuff in. So if you wanted to do a whole hog change on a certain component at a sublevel, you could just have another theme and then compose that with another chakra provider and kind of nest these, these different overrides depending on what you need. Or you could just, you know, ad hoc, apply some styles to the the the individual one off components that you need to. I just think from a, like, a a management perspective, I feel like that makes it really easy to kinda manage these things.

And then, obviously, it has, like, compostable structures, so you can kinda pick apart these things and, you know, target, you know, modal header, modal content, modal body, and all this other stuff. And it works great across, you know, managing responsive styles across a bunch of different stuff. And, you know, I I guess I've really grown to like it. The although I do feel kinda torn and and, obviously, Tailwind has a lot of success, and I wanna use it. But at the same time, I guess I just I guess I'm maybe I just, haven't been using it as long.

I just don't understand the quirks, but it definitely feels like you're kind of copying or pasting a lot more stuff. And I know that you can kinda go through and compose these things to where if there is, like, a certain grouping of styles, I think you can kinda compose a one off and name it and then apply it to those areas. But for whatever reason, I don't know. There's just something about the way that chakra does it that I really like. The other thing is, you know, chakra, if I need to use, like, an accordion or something, it's, there's there's nothing I have to really have to do from, like, I can just import those components.

Those things don't live in my repo. They don't when they get up when, you know, when Chakra pushes on update, everything just magically updates. I don't have to go back in and, like, tweak or recompose, you know, components that have already existing within the repo. And that's actually something I seem I don't know. Like, maybe maybe I'm just too green to it, but this is this is kinda going to, like, the park UI side of things.

And I and to be honest, I haven't used, like, Radix or, like, Shat cn, which I I believe is, built on Radix. I'm just not sure what, like, the upgrade story is there. And, you know, I'm I'm this is like an active question to you as a listener or whatever. Please inform me. I just I'm I'm kinda curious.

You know, if you're using a CLI and then you're kind of, you know, adding these components to your repo, and for whatever reason, if if, let's say, you know, there's updates that are made, to that component library, and then what you have to do, is get to run that CLI again? Or I mean, I would imagine you'd have to if there's, like, actually, like, underlying changes to the actual component structure, or is it just abstracted out to where you can manage that via theme? To be honest, I just really don't know. So hopefully, a question to you all is, what is the story there as far as managing, like, shad cn updates in your repo or working with these headless libraries when they make a change. I mean, I guess at the same time, if you're applying your own styles and it's not like it's a composition change, but maybe just an underlying change, maybe you just get everything for free still.

I really don't know. But, I guess what I can say is I did try I I've tried doing just, like, the straight Tailwind, setup. I've also tried using the panda c s, park UI with panda CSS. And I can and from at least my experience, maybe it's just because also I have this stuff lying around from previous projects. Getting started with Chakra UI and setting up your core theme and then being able to override and set up stuff from there just seems like it's the quickest way for me.

Again, I'm I'm I'm working within the cons the the context of, Next app using the pages router. So I'm just composing in the chakra provider in my app page and then setting up a theme using pretty much like the base theme, and then I'll go in and start tweaking colors or, know, readjusting colors and and spacing and stuff depending on what I need. But for the most part, I'm I'm, like, using probably 95% of the theme, and I'm just going in and basically, like, yeah, make this black, make this white, make this blue, you know, like a punchy blue, and, maybe make this red like a slightly duller, orangey red or something like that. And then that's that's pretty much I mean, I'm not really I'm not really a designer, but, I guess I have, like, a process. So, yeah, that's just, I mean, so that's what I'm I'm probably just gonna continue to use Chakra.

I really wanted to try to use this new project as, like, a a way to explore some of these other, you know, new styling options that are out there. But, for me at least at this point, sticking with chakra and going that route seems to be the the fastest way to make progress. So maybe I'll maybe I'll go back in once I have the core, some of the core utility of this this project that I'm working on done. I'll re reevaluate that stuff as I'm maybe moving into, you know, more of, like, the marketing and and promotion side of stuff. But for now, I'm sticking with Chakra.

Definitely would love to hear from someone who has more experience with Tailwind and managing that from, like, a from responsive standpoint as well as the ability of I mean, I think the thing with, Tailwind is once you've set it up, it doesn't seem like there's a great way to kind of be able to go in and modify that stuff from the outside. So that's one of the things I like. Even if you're building, like, a custom chakra component, you can name all these pieces and you can set all these default values via a theme config, And then you can go in and override those. I I guess I could just be green on it, but I haven't really had that experience, with being able to pull that off well with Tailwind. But I'm definitely yeah.

I'm open for education and and to being told that I'm wrong or that my, the viewpoints on this is is wrong. So just wanted to talk about styling and where I'm going with, on that front. And yeah. So you're listening to the All Play podcast. I'm Ryan Hefner.

You can find me on Twitter at Ryan Hefner. You can follow the podcast at allplayfm, and you can find the podcast at all play dot f m. Definitely DM me. DMs are open on should be on both of those accounts. Hit me up.

Tell me I'm wrong. Straight up, you know, at me publicly if you wanna do some public shaming or something. I'm open for it. And, Yeah. I'll see you again next time.

Have a great one. Later.