Thanks for reading! That’s a good set of questions and tough ones to answer. I’ve seen classes used when the component library uses CSS Modules. However, I’ve seen the style attribute be used when the library is styled with styled-components. So I guess with all things in software, it depends 😅
I think the key is to ensure that only the bare minimum of components allow CSS customizations. If devs are trying to overwrite styles all the time I would question if the component needs to handle it or if there’s a design system issue. But that’s just my two cents not a hard and fast rule.
To answer your second question, I don’t think libraries should exist to handle multiple CSS solutions. The consumer of the component library shouldn't have to worry about what CSS solution is being used as long as it works in their project. That's not to say they may not need to install some dependencies to work with the component library. For example, the styled-components documentation encourages you to list it as a peer dependency. Long story short, I don't think it's necessary.
José Pablo Ramírez Vargas
Senior Software Developer @ Intel
This was a good read, so thank you. I have a follow-up question: What's your take on how component libraries should allow appearance customization? Classes? Forwarding the style attribute? CSS variables? Etc. Also: Should a component library exist in flavors to accommodate styling packages like Bootstrap or Tailwind CSS?