4 ms·
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 compo
by drinchev 11y ago
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> ) }
}
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 :
<div class="_12az2X"></div>
with stylesheets file
._12az2X { color: red; }
[1] https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
[2] https://github.com/webpack/css-loader https://github.com/webpack/css-loader