This looks a lot better than I expected.<p>One thing that bugs me about this (and Tailwind) is the number of dependencies they pull in. Panda has 152 nodes (239, if you count their dev-dependencies)[0].<p>Tailwind has 98 (594 if you count their dev-dependencies).<p>I know they're only dev-dependencies, but still... I've got all of that code running on my machine, just to process CSS. I really don't love it.<p>[0] <a href="https://npmgraph.js.org/?q=%40pandacss%2Fdev" rel="nofollow">https://npmgraph.js.org/?q=%40pandacss%2Fdev</a>
I sometimes feel like the one weirdo using jsxstyle (originally by Pete Hunt of React 1.0), but it's been great for me. It's a really simple concept - exposing CSS keys as props:<p><pre><code> <Block
backgroundColor = 'red'
hoverBackgroundColor = 'blue'
marginH = { 4 }
marginV = { 12 }
padding = { 16 }
</code></pre>
Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system.<p>jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working.<p>Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda.<p><a href="https://www.npmjs.com/package/jsxstyle" rel="nofollow">https://www.npmjs.com/package/jsxstyle</a>
Panda seems really nice. As someone who does a lot of "creative" CSS work, writing styles quickly is important to me. I find writing styles as Javascript objects kinda cumbersome. I wish there was a way to use Imba's CSS system within a React or other Javascript app. <a href="https://imba.io/docs/css/syntax" rel="nofollow">https://imba.io/docs/css/syntax</a><p>Imba allows you to write CSS anywhere in a component definition using CSS-like syntax (rather than Javascript object syntax).<p>The syntax for adding a quick inline style is so simple:<p><pre><code> <div [width:20px]>
</code></pre>
You can even do hover states in an inline style:<p><pre><code> <div [color:red @hover:blue]>
</code></pre>
And interpolation is easy too:<p><pre><code> <div [width:{someValue}px]>
</code></pre>
Putting a CSS block at any level of your tag hierarchy scopes it to that tag.<p><pre><code> <div.foo>
<div.bar>
css color:red # this applies to div.bar
em color:blue # this applies to div.bar em
"hello"
<em> "world"
</code></pre>
CSS blocks declared in a component definition but outside of the markup, apply to the whole tag. CSS declared in a file, outside of a component definition, apply to all components defined in that file. There is also a global keyword to apply styles globally.<p><i>and</i> there's a whole range of other useful features, a favorite of mind is the shorthand syntax for things like this:<p><pre><code> c:red # same as color:red
d:vtc # same as display:flex flex-direction:column justify-content:center
x:10px rotate:30deg # same as transform:translateX(10px), rotate(30deg)</code></pre>
One of the lead devs on Panda also did Chakra (the React UI component lib). For me, Panda has been great, it's a very nice library to work with, with compiled CSS you get best of both worlds. Type safety and expressiveness of typescript and a clean way to define CSS styles for your components. I believe it works with any JS lib too. There's also a port for the shadcn UI library for Panda: <a href="https://shadow-panda.dev/" rel="nofollow">https://shadow-panda.dev/</a>
React has so many solutions for this- I wonder, is there anything that works similarly to Vue scoped styles? I always struggled with styling React but it's like a completely solved problem in Vue imo. You're welcome to use Tailwind of course but the scoped styles per-component work so well I rarely find myself missing it.<p>Then again I'm one of those few engineers who actually enjoys CSS so my opinion may not be representative.
This looks very similar to Vanilla Extract, the API of Panda is exactly the same DX I had using it with React, but I still ended up jumping on the Tailwind bandwagon because I find it just gives me a slight extra boost in productivity and speed, especially when prototyping.
There's definitely a subjective element to authoring CSS, so I'm glad people have options.<p>That being said, one of the things Tailwind got right is that it's even faster to type out than normal CSS _or_ JS objects.<p>When you know what you want from Tailwind you write it and see it very quickly. Subjectively, there would have to be some very strong benefits to get me to go back to writing plain CSS rather than a bunch of class names.
What's so wrong with CSS?<p>I get that react didn't really have a clean answer for styling, but that's more a reason to not use react than a reason to invent a new DSL for styles on the web.
I lean towards simple stylesheets. Plain. Classic. No preprocessor required. No build. Something like Tachyons, Bootstrap, W3CSS, Foundation you name it.
One less architectural component to maintain, update, upgrade, migrate etc.
For anyone who is looking for UI library that's compatible with Panda, I highly recommend <a href="https://park-ui.com/" rel="nofollow">https://park-ui.com/</a> By far the most polished and actively developed. I am building a second project using it.
We continue to over engineer solutions around a key/value struct to make a div blue.<p>Modern frontend is increasingly depressing. Don't get me wrong, there are lots of great things that solve real engineering problems, then there are things that really don't solve a real problem.
The site is trying to load a script that is failing: <a href="https://plausible.io/js/script.js" rel="nofollow">https://plausible.io/js/script.js</a>
Maybe it’s related… training contents (page Learn) do not seem to work.
ah, another attempt of how to make something simple, easy and elegant like css and turn it into a convoluted mess that will evolve into maintenance hell real quick. I can see the good intentions, and it will work initially, but I wouldn't want to be involved in something mature that uses this (or other similar) tooling.
The front end went into shit when we started shoving html+js in one file, now it will be worse having all three in one.. I don’t understand why is it too hard to keep these three files separated?! Look at the example code, total junk!