JSS is a higher level abstraction over CSS. It allows you to describe styles in JSON and leverage the power of JavaScript. It generates style sheets at runtime or server-side and solves a number of CSS issues.

You can use JSS with React, or with any other js library. It is small, modular and extensible via plugins API.

Installation and setup

Full documentation

Playground

Online examples.

Official plugins

External projects

• You build a JavaScript heavy application.
• You use components based architecture.
• You build a reusable UI library.
• You need a conflict 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.

export default {
  headline: {
    fontSize: 20
  },
  title: {
    extend: 'headline',
    position: 'absolute',
    zIndex: 10,
    '&:hover': {
      background: 'red'
    }
  },
  button: {
    width: 100
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

Converts to:

.headline-jss-0 {
  font-size: 20px;
}
.title-jss-1 {
  font-size: 20px;
  position: absolute;
  z-index: 10;
}
.title-jss-1:hover {
  background: red;
}
.button-jss-2 {
  width: 100px;
}
@media (min-width: 1024px): {
  .button-jss-2 {
    width: 200px;
  }
}

MIT

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