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.

Example

CSS

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 */

 

JavaScript

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.