JSS is a more powerful abstraction over CSS

Recently I realized that lots of people hesitate to use JSS for one particular reason — they like CSS. People tend to see JSS as a separate language and nobody wants to learn yet another language, right?

Well, the Idea of JSS is exactly the opposite. It is about using just one language for the logic and styling and get benefits from both worlds.

CSS has good and bad parts. For e.g. flexbox is good, but selectors specificity is not. I don’t blame CSS for this, it wasn’t designed for components and applications. I just don’t bet on the future versions of CSS to be great at this soon.

Future is already here.

We already have everything we need to write scalable (big projects) and maintainable (ease of change or remove particular parts) CSS. For this, we just need to leverage JavaScript as a language to describe CSS rules and skip the bad parts. JSS is only a tool that helps you to do so in a way which is clean and easy to reason about.

JSS js notation is VERY close to CSS. In fact, rules are almost exactly the same, even media queries are:

{
button: {
width: 100
},
'@media (min-width: 1024px)': {
button: {
width: 200
}
}
}

Have fun, give JSS a try and help me improve it!