A while ago when I was looking at the results of the State of CSS and State of JS there were quite a few tools and frameworks that I've never used and am curious about. So I'm taking some small bits and using some of those things to see what they're like.
The first one I tried was Vanilla Extract. It's interesting to search for, because you can get a lot of cake recipes if you're not careful. But it's actually a CSS in JS tool.
I've used one before - Styled Components - so I was familiar with the idea. But Vanilla Extract does a lot. You can do your ordinary CSS in it, as well as variables, themes and there's a Tailwind-like utility functions. Because I was only writing something small I only really scratched the surface of what it can do.
In general I found writing it went wrong a lot because you need to put eg backgroundColor: 'red',, whereas in CSS you have background-color: red;. I kept having to go back and unhyphenate and add quotes. But I think if I used CSS in JS a lot then I would get used to it.
Once I was past the ordinary CSS aspect I was quickly lost. I think that's because I was trying to use a bit of everything to see what it was like. If I had a bigger project or used it on more projects then I think I'd gradually get to understand it.
But I found the documentation on the website was good. Which is just as well as there's not a lot out there and most of it just repeats what's on the website.
I struggled to bit to get it installed and working because I was using it with Vite, which is an unusual combination (Vite is about the only bundler that will work on my old, slow computer).
I don't know that I'll use it again, because it's more than I need for simple side projects. But I can definitely see how it would be useful for larger projects.
Top comments (0)