css-loader

It sounds like you are unfamiliar with what modern JS looks like. > JavaScript - Dynamically typed, does not scale what so ever. Flow has resolved this. It has good investment from Facebook, plenty of adoption, a flexible type system, and you can sprinkle it into existing code as you like. Also try wallaby.js for instant test running. > CSS - Also becomes impossible to manage. See webpack's local css scope. https://github.com/webpack/css-loader. > HTML - At the heart of it, the foundation is the layout engine and positioning, and it sucks. Flexbox was supposed to bring sanity, but I feel like we're still waiting on it. Bootstrap or any million css libraries. Just have to wait for Flexbox and we are good.

> The old way of doing CSS was crazy and unmanageable. That's a bit of a stretch though, we've had good success with using normal CSS files, included in each component with webpack CSS-loader[1]. CSS is displayed in head as needed, but without an all-JS approach like this [1] https://github.com/webpack/css-loader

Yes. Since your HTML is all Javascript now, there are people that went a bit further and created libraries for modularising your CSS files, based on that components [1][2]. The basic idea is that, since you are using ReactJS and you are compiling your JSX files to normal JS files, for which you are using a tool like "browserify" or "webpack". These tools are so powerful that can capture your `require` statements and convert your "non-javascript" required modules to something that javascript can use. In a similar way I'm using webpack & css-loader. My JSX file looks like this : // Component.jsx var styles = require('./Component.css'); // Component.css is a normal css file that has a .component class inside class Component extends React.Component { render() { return ( <div className={ styles.component }></div> ) } }

Webpack's css-loader implements CSS modules specificaton, see https://github.com/webpack/css-loader#css-modules

Hasn't this been already done in webpack (css-loader with local scope)? https://github.com/webpack/css-loader#local-scope

If you're interested in CSS in JS you should check out css-modules [1] and its Webpack [2] or Browserify implementation [3]. You get scoped, modular, composable, requirable CSS without the burden of doing styles in JS. [1] https://github.com/css-modules/css-modules [2] https://github.com/webpack/css-loader [3] https://github.com/css-modules/css-modulesify

Webpack's css-loader is made pretty much for the same goals, but it has some differences. https://github.com/webpack/css-loader One difference between the two is that css-loader allows you to use normal css files with classes and selectors, while ReactCSS inlines all properties. For example, with css-loader, you can use much of your old toolchain for css. You can use sass, less, or newer tools like postcss, but you still get the benefit of local styles. Here is a nice articles that touches on css-loader and postcss: https://medium.com/@olegafx/frontend-welcome-to-the-future-9...

I really really love this idea. My only beef, currently, is that it generates this kind of CSS (taken from [0]): ._23_aKvs-b8bW2Vg3fwHozO { background: red; } ._23_aKvs-b8bW2Vg3fwHozO { color: green; } ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; } ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 .global-class-name { color: blue; } This seems like a pain to debug using devtools. I'd love if the generated classnames could resemble the original classnames, e.g. .my-fantastic-component-24xMw Or even just .my-fantastic-component-1 Given that webpack has global program knowledge anyway, it should be able to prevent name clashes if multiple css files use the same local class name, no? I see that there's nothing in this standard, however, that would prevent readable class names. [0] https://github