[krishanath]

>> React has nothing to do with styles

That's one of its limitations.

React is a component technology and doesn't solve the problem of clashing styles, element ids and so on. Web components is a component technology that does.

[TomMarius]

No, it's not a limitation, it's called separation of concerns, I don't want my component framework interfering with the job of Webpack or application runtime. I want to use my preferred (also easy, standard, ...) solution.

> clashing IDs

React solves that one, not through namespacing though. You never need to use IDs with React.

> clashing styles

React gives you power to solve this one by your preferred solution. You can use expressions in your JSX, and thus it's very easy to do one of the following:

- Generate optimal global CSS stylesheet with no code repetition, generate classnames on the fly (https://github.com/typestyle/typestyle)

- Import your CSS file as a module using Webpack - classnames are guaranteed to be unique; additionally, similar approach as TypeStyle (global optimal stylesheet) can be set up

- Use just "inline" styles (preferably not really inlined in your JSX) since React will keep it updated for you as well

[lhorie]

Not doing anything about CSS isn't separation of concerns, it's just a leaky abstraction. Separation of concerns implies some work was done to achieve some level of decoupling that would otherwise be tighter.

In fact, the criticism that react components can have style clashes is precisely one of not having enough separation of concerns. The fact that there are numerous libraries to address that deficiency further indicates that react as a platform is severely affected by the underlying level of abstraction when it comes to styling.

It's fine to defend a technology you like but calling a weakness a strength does nobody any favors.

[_sdegutis]

Styled-Components gives you efficiently “inlined” styles (creates unique CSS class used only by instances of your component) and doesn’t affect global CSS. It’s up to the developer to avoid polluting with global CSS and that’s honestly not very difficult.

[anthonybullard]

>You never need to use IDs with React.

If you don't care about accessibility then yes.l, but try using properly annotated aria attributes without appropriately scoped ids(which you can do in react, but it's not free).

[TomMarius]

Hmm, right now I truly don't (that's the business requirement :-/). I'll investigate, thank you.