![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.
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.