Utility-First Class

[airen]

I was wondering if the open props library and the Utility-First class could be interfaced with each other. can i use props to describe the Utility-First class. For example, use props to describe the Utility-First class in tailwindcss (https://tailwindcss.com/docs/utility-first).

Use props to describe the basic style.

But I haven't quite figured out how to do that, or does that make sense? I'd like to hear any better suggestions and opinions on this?

[Afif13]

I think "Open Props" and 'utility first" are two different world and we should not combine them. Utility first like Tailwind provide a "class per value" so for each value of a property you have a class you can apply.
The "Open Props" is a different thing. We are not talking about classes but about CSS variables. The goal is not to define a variable for basic values but to define variables for "complex" ones to make the CSS easy to write.
It doesn't make sense (at least to me) to define --d-flex:flex and latter use display:var(--d-flex). Simply use display:flex
What we want to do is to define --pattern-gradient-1: ... (a complex pattern background) and later use background:var(--pattern-gradient-1).
We are still writing CSS but we are relying on CSS variable to store "useful values" that we can easily use later. I don't think there is any benefit to store all the values for each property inside variables especially for the basic ones

[airen]

Utility first is Atomic CSS, they are the smallest particles that build the UI, equivalent to Atomic in Atomic Design. any complex UI can be described by these particles.

Of course, the Utility First Class and Open Props are not the same thing, which I agree with. I just want to throw out this topic to discuss with everyone, maybe it is not mature now. But recently, using Design Token to describe a UI, the first thing that came to my mind was Atomic CSS, and seeing the emergence of Open Porps, I wondered if there might be can a better combination of them.

[argyleink]

I think atomic classes and open props have a healthy future together. that being said, what i think this discussion is introducing is exactly what something like windicss is and has already setup?

i see a future not where there's a class for each property, rather atomic classes generated on demand, like vanilla extract with sprinkles. there needs to be an on demand atomic class generator that keeps custom properties as 1st class citizens, i have a feeling it can be done with todays tools but isnt popular yet.

[LuukLeijtens]

Maybe unocss is a good fit.

[argyleink]

I feel like windi and uno both want you to "do the work" in your HTML / template, where Open Props helps you do work "wherever your put css values". not sure making a classname system for all the props makes sense.

[brittneypostma]

Having utility classes is definitely a personal preference, some people love them and some hate them. With Open Props, I feel like utility classes would just shorten the naming and allow it to be put in the markup. That doesn't seem to necessarily be the priority of open props imo, but it would give it another place to be accessible to users without having to create your own. I think having some utility classes that have multiple props applied would be beneficial though. Also having grid like tailwind does would be great (i.e. grid grid-col-3).