The important parts.
JSS is a very thin layer which compiles JSON structures to CSS at runtime. It is also a replacement for CSS preprocessors, but what is most important comes next.
Composability
CSS hasn’t been designed to fit into components based architecture. Every selector you write is global. There is no good way to avoid conflicts when integrating third party components or even written by someone from the team. Long complicated names and increasing specifity of a selector doesn’t solve this problem either.
In JSS you write “named” styles by default. Instead of writing selectors directly you give your rules a local name and then you use it to access a generated conflict free class name.
var sheet = jss.createStyleSheet({
myButton: {
position: ‘absolute’,
color: ‘red’
}
}).attach()var classes = sheet.classes
Then you use a generated class name within html. (Using any template engine)
<button class=”{{classes.myButton}}”></button>And you pass the classes object to the template renderer.
template.render({classes: sheet.classes})Result
<button class=”jss-0”></button>No conflicts possible. 100% composable.
Real code reuse
The way of CSS code reuse is really dirty. You rely on global rules and then you overwrite them to make your local changes happen. Also CSS has this concepts of selectors explicity, source order and !important keyword which make everything even more complicated.
In JSS you can reuse rules by accessing them explicitly and using jss-extend plugin.
var someColor = ‘green’var button = {
float: ‘left’
}jss.createStyleSheet({
myButton: {
extend: button,
color: someColor
}
})
Plugins enabled
JSS core is really small and fast. All extra features are implemented using plugins api. It opens a room for features you always wanted! There is already a bunch of plugins, but there could be so much more!
I could imagine dynamic bindings, constraint based layouts, dynamic fonts loading and lots of other ideas which popped out during development.
