[dmix]

This is just unfamiliarity IMO.

This is a component you reuse across tons of sites, it's not a one off component you're building for yourself. It's also not just a CSS framework like Bootstrap. This is full CSS + JS component's with functionality, Vue/React/Svelte framework integration, and events built in.

Whether css-in-JS as a whole makes sense beyond these generic component type systems is a good question. There's plenty of complexity introduced.

But for a generic component being used in plenty of use cases - not just UI usecases - but highly interactive JS driven ones as well, then it makes a lot more sense to have styling tied to programming languages and conditionals and options and JS data structures.

[bobthepanda]

Css in JS (as in, inline styles) is just going to be a lot worse than class names because JS is fundamentally performance bottlenecked way harder than CSS is.

[satvikpendem]

I'm not sure I understand what you mean by CSS in JS, since you say inline styles next. Are you talking about JSX having a style component? Or Tailwind within the className in JSX? Or CSS in JS libraries like styled-components?

[bobthepanda]

Styled-component also has this issue but mostly I mean literally assigning a string to the html attribute style.

Classname strings are fine.

[dmix]

Can you explain what you mean by this? Do you mean just generating hundreds of strings (with long atmoic class names) to style each component vs loading a global CSS?

IDK about React but Vue also has things like scoping, where the elements get unique IDs appended as data tags so you don't have to worry about CSS global scope clashes. Plus with Webpack/Vite the CSS automatically gets extracted and via HTTP2 only loads the tiny JS and CSS files needed only for the components used on the page.

In that case giant blobs of CSS and JS would be less efficient.

[bobthepanda]

It used to be, that CSS-in-JS meant people naively writing something using a computed string to use the HTML style attribute, like so

    var style="color:blue;text-align:center;"
    return <h1 style={style} />

and some CSS in JS frameworks compile down to pretty much that. However, this is a bad practice, because you will consistently see worse performance than just using css files and classnames instead.

[conradfr]

Bootstrap has JS components.

And utility classes.

[dmix]

Sure true, in the old jquery plugin sort of way, I forgot that. Although that's not really what people call JS component's these days with Web Components/react/Vue sort of styles mixed with JS within the self-packaged components rather than a CSS framework with a couple optional jquery plugins.

Unless they modernized it in recent years, haven't used it in 5yrs.