How should I approach CSS in my UI Component library?

@sorvah wrote:

I’m building a small UI component library for my team to use and I’m a bit stuck on what the best approach to styling out the components is.

At the moment the components have no styling whatsoever and I liked this at first because it meant that they were completely CSS neutral. It didn’t matter if you used Bootstrap, Material, Tailwinds etc. However the drawback of this is every component invocation requires class attributes which gets tiresome and makes the markup cluttered.

Which leaves me a bit unsure. I could obviously classNames the components to bake classes into them but then the library is becoming opinionated in an environment where we might use Bootstrap for one project and Material for another.

I thought of adding default, custom selectors to each component like libraryname-panel-header and then we can either come up with a default css styleguide or it can be left on a per project basis. This has a drawback in you suddenly have to do a load of CSS and that might not be a small job. You also have to ‘learn’ a bespoke catalogue of classes and that might be more of a waste of time.

I’d love to get some insight into how others have approached similar issues and if there is any sort of ‘best practice’ approach for such things.

Posts: 2

Participants: 2

Read full topic