radium

Yep, styled-components is another good take on the same idea as CSS Modules. More alternatives include: - Aphrodite (https://github.com/khan/aphrodite) - Radium (https://github.com/FormidableLabs/radium) - JSS (https://github.com/cssinjs/jss)

I was referring to CSS-in-JS and what is coming out of it. https://speakerdeck.com/vjeux/react-css-in-js Not all of them use inline styles and a lot are library agnostic. Here are just some of the ones I have played with, plenty more exist. https://github.com/rofrischmann/fela https://github.com/FormidableLabs/radium https://github.com/Khan/aphrodite https://github.com/threepointone/glamor https://github.com/MicheleBertoli/css-in-js https://github.com/styled-components/styled-components https://github.com/css-modules/css-modules https://github.com/cssinjs/jss https://github.com/smyte/jsxstyle https://github.com/rtsao/styletron

Your answer was so insightful! I think this adds to it https://github.com/FormidableLabs/radium/blob/master/docs/co...

FormidableLabs (https://github.com/FormidableLabs) is doing some very good work in the React ecosystem. Here are projects that I'm particularly excited about: 1. Spectacle (https://github.com/FormidableLabs/spectacle), Presentation Library 2. Victory (https://github.com/FormidableLabs/victory), Graphing Library 3. Radium (https://github.com/FormidableLabs/radium), Component Styling

Thank you, that's what I wanted to know, since projects like Radium implement e.g. hover in JS using onMouseEnter() etc, which sounds slow. See https://github.com/FormidableLabs/radium#how-does-radium-wor...

The hover problem does kind of suck--- as far as I know, Radium (and others https://github.com/FormidableLabs/radium/tree/master/docs/co...) tend to solve it by wrapping components with a component that tracks hover state. And moving the hover-state tracking into React isn't the _worst_ thing--- JS is meant to be in command of the interactive portions of websites, so it does kind of make sense. If your :hover is ever going to have to do more, like show or hide content, it'll have to be in JS anyway. The "JS Fatigue" haters will be cobolt-maintence programmers of the 2020's, I don't pay much attention to them. Javascript has a lot of churn because we have a difficult platform & language to improve upon.

Could be a little simpler if you're using an ES6 transpiler. import styles from './styles/global'; const thisButton = { ...styles.button, custom: stuff }; Also, nth-child and similar selectors aren't too bad, especially if you use a [1]helper library on top of React that lets you pass an array of styles to a component. All it then usually requires is adding a test against the iterator index when rendering a list of data. Something like: this.props.list.map((entry, index) => { const style = [styles.row, index % 2 === 0 && styles.even]; return (<div style={style}>{entry}</div>); }); A little bit of extra code but so much that I find it to be an issue. [1] https://github.com/FormidableLabs/radium

Neither, the cool kids are using Radium https://github.com/FormidableLabs/radium :-J

Radium is simple, for that I like it. Complexity comes with a price and there may be alternatives but Radium leverages JS expressions which I like. Quoting from the article again: /* components/submit-button.jsx */ import { Component } from 'react'; import styles from './submit-button.css'; export default class SubmitButton extends Component { render() { let className, text = "Submit" if (this.props.store.submissionInProgress) { className = styles.inProgress text = "Processing..." } else if (this.props.store.errorOccurred) { className = styles.error } else if (!this.props.form.valid) { className = styles.disabled } else { className = styles.normal } return <button className={className}>{text}</button> } } That looks unwieldy -- 4 if/el

It's wonderful that CSS problems have been distilled so clearly, it's been a long time coming. Radium[1] is really worth checking out, it's simple and clear. From the article: /* BEM */ .normal { /* all styles for Normal */ } .button--disabled { /* overrides for Disabled */ } .button--error { /* overrides for Error */ } .button--in-progress { /* overrides for In Progress */ /* CSS MODULES */ .normal { /* all styles for Normal */ } .disabled { /* all styles for Disabled */ } .error { /* all styles for Error */ } .inProgress { /* all styles for In Progress */ > In CSS Modules each class should have all the styles needed for that variant This seems like trading one set of problems for another. It violates DRY and consequently impacts code maintainability. The corollary is that .disabled should @include .normal and t

To add, radium has this nice comparison readme too: https://github.com/FormidableLabs/radium/blob/master/docs/co...

One of my initial problems with React & CSS was styling :hover etc. For now, Radium [0][1] solves this problem, but IMO as a community we're still trying to figure out all the best practices and patterns, when it comes to building isomorphic webapps (or webapps is general, since React introduces new way of building apps and I'm sure that's just the beginning). [0] http://projects.formidablelabs.com/radium/ [1] https://github.com/FormidableLabs/radium

Good question. Intuitively, having inline styles over style sheets goes against common patterns involving maintainability of large code bases, ditching mixins, variables, and other helpful functions that preprocessors like Sass provide you with. The idea is that you gain extra maintainability points by co-locating your styling with your logic and DOM, a pervasive design patter in React in general. If I want to style a particular view, I no longer have to concern myself with which stylesheets contain styling for that view. I can simply go to the React Component where that view is owned, and see the styling for it right there. See also: - https://speakerdeck.com/vjeux/react-css-in-js - https://github.com/FormidableLabs/radium