Ask HN: Inline Styles or CSS-In-JS with React

#1

Post by danlan » Tue, Mar 13, 2018, 11:05 PM UTC

I've been writing using React for a little over three years now and I'm currently using a combination of JSS (cssinjs) and inline styles.

Recently my colleague has voiced a preference for using solely Inline Styles and it makes sense to follow a common pattern but I'm hesitant as I've found the lack of cascading and pseudo elements with inline styles to be difficult in the past.

I also find using CSS classes produces cleaner render functions but I'm not sure that's a worthy argument either.

Would love to hear what the general consensus is here

Re: Ask HN: Inline Styles or CSS-In-JS with React

#2

Post by maxharris » Tue, Mar 13, 2018, 11:22 PM UTC

A better alternative to CSS classes is https://www.styled-components.com/

I'm using this in a huge production app (I wish I could tell you what it is, but I don't want to link my work to my HN comments.)

Re: Ask HN: Inline Styles or CSS-In-JS with React

#3

Post by acemarke » Wed, Mar 14, 2018, 12:39 AM UTC

There's plenty of options, with no distinct winner. Use whatever your team finds most maintainable.

See the "React Styling" section of my React/Redux links list for articles explaining the differences between these various approaches and some of the tradeoffs involved: https://github.com/markerikson/react-redux-links/blob/master...