JSS


JSS is a higher level abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It compiles to CSS at runtime or server-side and is potentially more performant. You can use it with React or with any other library. It is less than 4KB (minfied and gzipped) and is extensible via plugins API.

Links

• Benefits
• Installation and setup
• Full documentation
• Playground
• Online examples.
• Official plugins
• External projects

Example

export default {
  button: {
    fontSize: 12,
    '&:hover': {
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: 'red'
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      minWidth: 200
    }
  }
}

Converts to:

.button--jss-0-0 {
  font-size: 12px;
}
.button--jss-0-0:hover {
  background: blue;
}
.ctaButton--jss-0-2 {
  font-size: 12px;
}
.ctaButton--jss-0-2:hover {
  background: red;
}
@media (min-width: 1024px) {
  .button--jss-0-0 {
    min-width: 200px;
  }
}

Render styles to the DOM (setup plugins before):

import jss from 'jss'

const {classes} = jss.createStyleSheet(styles).attach()

classes // {button: '.button--jss-0-0 ', ctaButton: '.ctaButton--jss-0-2'}

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
  <button class="${classes.ctaButton}">CTA Button</button>
`

When should I use it?

• You build a JavaScript heavy application.
• You use components based architecture.
• You build a reusable UI library.
• You need a collision free CSS (external content, third-party UI components ...).
• You need code sharing between js and css.
• Minimal download size is important to you.
• Robustness and code reuse is important to you.
• Ease of maintenance is important to you.
• You just want to use any of its benefits

License

MIT

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers and to all awesome contributors.