pollen VS open-props

Curious to know if anyone has compared this to Pollen:

https://www.pollen.style/

I’ve used Pollen as an alternative to the bulk of Tailwind and have been very happy with it.

So frameworks like https://www.pollen.style/ are doing this. Personally I still prefer the tailwind approach.

I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].

[0] https://github.com/heybokeh/pollen

[1] https://github.com/argyleink/open-props

Tailwind is a great option to look into, I really enjoy it, but if you want something a bit more in-between, you can check out frameworks like https://www.pollen.style. There you get a framework of consistent CSS variables you can use, while still writing all your vanilla CSS yourself with full control of everything.

It uses UnoCSS (think TailwindCSS but super customizeable) with Pollen (which is similar to open props).

Very similar to Pollen (https://www.pollen.style), though it looks a little more complicated.

IMO the main value of Tailwind is that it's a step function over your units and colors, which helps bring better consistency and dev speed to UI implementation.

Tailwind's "write class names instead of CSS" approach makes sense in the component-based systems most apps are built in these days, where pretty much any repeated markup will be turned into a component. It performs better than scoped styles and is less complicated.

A CSS variable approach like Open Props or Pollen is, in my experience, better if you're not using a component-based system (ie. conventional HTML) and therefore have repeated markup patterns. Having a simple class name to apply to repeated markup is much more maintainable than trying to copy/paste a long tailwind string around.

Pollen and Open Props are two popular examples of such token first frameworks. If you are not familiar with CSS Custom Properties (also called CSS variables), I recently wrote about how to use them to create a CSS Style API layer.

In the last few years, a new set of frameworks with a radically different concept drew the attention of frontend developers. These frameworks are now extremely popular in the frontend world, and you’re likely already familiar with them: Tailwind CSS and Pollen.

Great writeup!

Lately I've been enjoying Open Props[0]. It's a library of CSS props/ variables that helps structure a design system. I like it because it's CSS-first, so like OP experienced moving off TW, I've learned more CSS, and it works with the browser not against it. It also provides some sane defaults for anyone less interested in fiddling with precise cosmetics.

[0]: https://open-props.style/

https://PicoCSS.com was a great starting point for projects, but there was some friction:

- Too many breakpoints: I just wanted a single breakpoint for phones, otherwise responsive based on content/screen width.

- Too many CSS variables polluting dev tools.

- No longer maintained: SASS warnings polluting terminal output.

- Missing concept of "surfaces."

---

I just wanted a classless CSS library that worked well with https://open-props.style. Basically a nicer-looking Open Props Normalize[1].

So I built Nimble.css! (Assisted by Claude.) PicoCSS-inspired aesthetics combined with Open Props curated values.

[1]: https://codepen.io/argyleink/pen/KKvRORE

Why not use open props then? You get a style system, but not the weird turn-classes-into-inline-styles thing

https://open-props.style/

Not related to the layoff (I'm very sad for what author is experiencing), but the blog looking is very great and functional. Looking on the page code I see that is using a CSS framework that I'm never heard off Open Pros (https://open-props.style/), looks like a much better solution than Tailwind and friends. I see that a components collection is the development too Open Props UI (https://open-props-ui.netlify.app/)

I was trying to integrate Open Props CSS styles with my Nuxt project. This is not that hard, but due to the way how Open Props work, you also need to include and enable PostCSS plugin called postcss-jit-props and supply it with the data object from open-props package to allow values being injected correctly.

> Limited set of predefined values to us...

With the ability to predefine css constants I guess it's now possible to use the style prop directly and not have to use raw hex colors and pixel values (eg. there are css libraries with these https://open-props.style).

Maybe check out Open Props?

https://open-props.style/

ZingGrid is built with modern native web components for performance and resiliency, but as a side effect of that a lot of the components exist inside Shadow DOMs. Still wanting to allow users to style any part they desire, hundreds of CSS Variables were created to pierce these shadows. Below we show how they can be used in conjunction Open Props for added flexibility.