Hacker News new | comments | show | ask | jobs | submit login

Styling with JS is simply a much better experience than using stylesheets.

Like it or not, styling often changes in accordance to changes in the application state. Instead of reacting to state changes by appending/removing class names, you can remove much of the friction by making style a part of the application state and changing style directly when the appropriate state changes.

By using inline styles exclusively, styles are now completely local and isolated by default, and can never have any unpredictable cascading effects throughout the rest of your app. We simply cannot understate the importance of this guarantee of isolation in a component-oriented architecture.

We also gain all the facilities we might possibly need to programmatically manipulate our styles since they're now just JS objects, without having to resort to the clunky DSLs offered by preprocessors like LESS and SASS.

Last but not least, we can enable far more granular style reuse using plain JS objects by leveraging the excellent built-in ES6 module system, and automatically benefit from module optimization techniques in advanced module loaders like Webpack to remove unused styles in production.




Only real downside of inline styles is that they're a subset of real css, and are not as expressive. Goodbye using pseudo classes like :focus, :active, etc with just the React 'style' object. And for things like designing input components, they're really important. You could hack around this by maintaining component state (e.g., flipping a boolean for mouseEnter and mouseLeave to emulate :hover), and use the boolean within your styling logic, but that is pretty hacky.


That said, with react tools like https://github.com/threepointone/glamor or https://github.com/milesj/aesthetic * you can get the best of both worlds. Isolated css plus :hover and other psuedo attributes.

* or https://github.com/dowjones/react-inline-style or https://github.com/martinandert/react-inline ... there's a lot of options


Note: The library rebass uses, styled-components, doesn't use inline styles. It takes your styling and injects it as an actual style.sheet with automatically generated class names! This means you have the full power of CSS at your fingertips without having to resort to component state for e.g. hover.

See this article for more information about the difference: mxstbr.blog/2016/11/inline-styles-vs-css-in-js/


Nice explanation. I agree. Removing the cascading effects is an especially big one.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: