CSS modules


A great article on css modules: http://glenmaddern.com/articles/css-modules

This allows css to be imported and used in JavaScript.

A great fit for web components and can be easily used in frameworks like Aurelia, Angular, React etc.



Create a *.css file called submit-button.css  with content:
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */



Then use the css in your JavaScript like:

import styles from ‘./submit-button.css’;

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`


HTML (result)

<button class=”components_submit_button__normal__abc5436″> Processing… </button>


Under the covers it uses ICSS, more on ICSS: http://glenmaddern.com/articles/interoperable-css