This has become quite the hot topic lately. It's been talked about at a number of conferences and meetups I've been at personally lately. I've seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh?
CSS is global and static. And what’s wrong with that?
Creating inline styles are ok as long as it isn’t taken to the extreme. Now there’s ReactCSS. See the discussion on HN. How's this affect performance? How long will this trend last? Happy debugging ;)
These are the main arguments against CSS:
Everything is global. Selectors are matched against everything in the DOM. You need naming strategies to combat against this and keep things efficient (which are hard to enforce and easy to break).
CSS grows over time. Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. So, they don't, they only add. I've seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company's focus on performance.
You can be more dynamic with styles in a programming language. The argument goes something like "we're already juicing up CSS with preprocessors anyway, might as well kick it up a notch." You could for instance (if you really wanted to make this controversial) base styles off a User-Agent string or a module's current width.
I can't buy this. it's a smple enough example BUT in the real world, the # of vars is going to get out of control.
// Abstract this wherever in your build process // There could be logic here. var divStyle = { background: "#eee", padding: "20px", margin: "20px" }; // Inline styles applied in the HTML you build here var Module = React.createClass({ render: function() { return <div style={divStyle}>Hello {this.props.name}</div>; } }); // You could pass dynamic stuff here as needed. React.render(<Module name="World" />, document.getElementById("area-1")); React.render(<Module name="Universe" />, document.getElementById("area-2"));
The virtual DOM thing that React does is also important because of its speed. DOM manipulation stuff is generally regarded as slow in JavaScript, and thus managing styles through DOM manipulation would also be slow. But React has the magic dust that makes manipulation fast, so people don't worry about the slowness issues when working with React.
Here's another example by Chris Nager.