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

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/




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

Search: