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> ) }
}
Now your webpack / browserify tools captures those require files, parses their class names and outputs a concatenated "stylesheets.css" file that has all the class names with a hash prefix. And the final Html/Css look like this :
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 :
Now your webpack / browserify tools captures those require files, parses their class names and outputs a concatenated "stylesheets.css" file that has all the class names with a hash prefix. And the final Html/Css look like this : with stylesheets file [1] https://github.com/css-modules/css-modules [2] https://github.com/webpack/css-loader