JSS is a more powerful abstraction over CSS

Oleg Isonen
Sep 29, 2015 · 1 min read

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store