[chiefalchemist]

A Design System makes sense. It's the UI SME if you will.

That said, in that context, I don't see the appropriateness (?) of something such as:

.rounded-lg{ border-radius: .5rem }

It's not abstract enough (for me). That is, if the design system evolves that shouldn't become a code issue (e.g., remove .rounded-lg and replace it with something else). To me all that should be via CSS and only CSS. There sould be -as much as possible - a layer of abstraction between the code and the design system.

Is it just me? What am I mis-thinking? Or does CSS in JS all but eliminate such a possibility? But isn't that what a design system helps to resolve?

Help?? :)

[wildrhythms]

For the vast majority of components, don't you think some small-medium-large presents cover most cases? This applies to so many style areas- typography, spacing, colors... For edge cases, there's nothing preventing you from overriding the style.

[nsonha]

functional css is basically anti design system. Some will deny it and claim that they do have a design system implemented in functional css, but really all they do is adding a redundant layer between css and their design system.

[wildrhythms]

What do you mean? There is nothing special about naming classes and grouping styles together that is exclusive to a design system.

I work at a well-known tech company and we have many projects using the same Tailwind configuration, and an entire components/ file with .jsx components. No need for making up arbitrary class names.

[nsonha]

> No need for making up arbitrary class names.

in a design system no reusable classname is abitrary, they should all mean something in your design language. If you find yourself reusing arbitrary classname, then that's just... writing css, not using a design system.

the idea of the design system is that you compose from what in your design system exclusively. This is to prevent ad-hoc slyling that goes outside established patterns. If you are just going to compose generic css then there is no point.

I never had to name any class because I use styled-components. Either the style is part of my design system, then it has a name, the component name, or it's just ad-hoc css, that I don't export. I don't reuse that kind of thing.

The tailwind way is you try to reuse & compose bits of the ad-hoc css by having generic, arbitrary classnames that you don't write but provided by a library