State of React and CSS

Re:State of React and CSS by madeofpalk on Monday April 04, 2016 @05:20PM (#11425764)

On a bit more of a positive note, I highly encourage people to check out CSS Modules. It introduces name mangling to CSS so you get 'locally' scoped CSS classes which you use by 'importing' them in your view component.

It's 'compatible' with any preprocessor, because it's working on the CSS itself. I think the cool thing about CSS Modules is that it makes BEM obsolete - that naming pattern is now essentially enforce at 'compile-time'.

Check out this article for more info http://glenmaddern.com/articles/css-modules

[ Parent | on HN ]

Re:State of React and CSS by cnp on Monday April 04, 2016 @06:09PM (#11426148)

I was using Radium for a while, but switched to CSS-Modules and never looked back once. Its so much nicer, and you get to keep everything that CSS already has, including a sane readable dom and the ability to inspect elements (not possible with inline-styles when your output is all `style={...huge giant mess...}`). On top of that you still get to use your favorite CSS preprocessor if thats your thing. There's no comparison IMO. CSS Modules fix the scoping issues, and `composes: otherStyle` fixes the rest.

[ Parent | on HN ]

Re:State of React and CSS by exogen on Monday April 04, 2016 @06:17PM (#11426208)

AFAIK Radium actually no longer generates inline `style={...}` attributes but `<style>`s at the appropriate places instead.

[ Parent | on HN ]

Re:State of React and CSS by tlrobinson on Monday April 04, 2016 @05:27PM (#11425817)

I agree CSS Modules are super neat, but I haven't really figured out a good way to handle cases where the cascade part of CSS is actually useful, like theming.

[ Parent | on HN ]

Re:State of React and CSS by yadascript on Monday April 04, 2016 @06:38PM (#11426310)

I like it a lot, but I had a hard time combining local CSS modules with external libraries (such as bootstrap, or a CSS for a plugin) in a previous react project.

[ Parent | on HN ]