Web Development

There's absolutely a massive internal bias people have where they naturally believe that others develop the same kinds of content, when really it's half working on page based content, and half working on component based content.

• Page developers know that putting their styles in the content itself is a disaster when you want to make a global change.
• Component developers know that putting their styles external to their components is a dx nightmare because developers keep making changes that they think only affects one component when it actually impacts a different component (and that change might not be found until months or years later).

Both are correct.

The real problem is developers thinking that there are only two methods for making styles: external css files, and tailwind/atomic styles in class names.

Component developers should have their styles inside their components, but not inlined in style attributes (like in tailwind).

Component developers should instead place a style tag inside their component that is scoped to just that component.

So let's say you're making an accordion component.

Make your html+js/jsx like you already do, and add an "accordion" class to your component's root element. Now add a style tag in your component with a single selector targetting the .accordion class. Now you can use nesting to style anything in the accordion exactly how you want. Want to style something based on whether an element is open or not? Use an attribute selector. Want to style something based on whether it's child is doing something? Use the :has() selector. etc...

If you're making a widget system, use container queries. If you're making a card system, use subgrid.

There's so many obvious use cases that modern css provides for, so use modern css! and not any of this BEM or tailwind nonsense. Now your css is so much smaller, robust and more maintainable.

Follow up questions:

Q: But I don't know modern CSS

A: Learn, it'll be much better for you in the long run compared to using tailwind, then needing to learn something else once people switch off tailwind for something else.

Q: But wouldn't putting a style tag in every component mean that there's going to be two style tags on the page if I put two of the same component on the page?

A: It'll only do that if you make it do that. Most component based frameworks are already set up to reduce repetition, check your framework's docs. (e.g. react's many css-in-js solutions, web component's :host selector, vue's <style> and <style scoped> elements, SSGs like Eleventy have Asset Bucketing, and even native html is getting it's own solution this year with @scope).