![Gitter](https://badges.gitter.im/Join Chat.svg)
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.
- 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.
- style.js
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
}
}
}
- app.js
import jss from 'jss'
import style from './style.js'
// Creates the style element and inserts it into DOM if DomRenderer is used.
jss.createStyleSheet(style).attach()
Generated style:
<style>
.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;
}
}
</style>
npm i jss
For more information see CLI.
npm i jss-cli -g
jss --help
npm i
npm test
MIT
Thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers and to all awesome contributors.