The functional alternative to CSS
This is not a library or something. It’s just an idea that will change the world.
The idea is simple. Instead of one big fat CSS scope full of name conflicts and inheritance chains you compose your styles out of little functions.
As well as being super modular, composable, testable and isolated, functions have one more obvious advantage. They can take options.
So instead of this CSS:
/* • styles.css */
.my-class {
color: blue;
}
/* • red-theme.css */
.red-theme .my-class {
color: red;
}You write this beautiful, concise JS:
// • styles.js
export myClass = ({ color = 'blue' }) => ({ // Defaults are totally optional!
color,
});
// • red-thing.js
const theme = { color: 'red' };
<h1 style={ myClass(theme) }>
I’m very red!
</h1>Fair enough – that was nothing new to some of you. But here comes the exciting part:
[snare drum rolling…]
Thanks to git.io/orthodox you can also render a CSS module with the same function!
const restyle = require('restyle');
restyle({
'.my-class': myClass(theme),
});
//» `.my-class {
// color: red;
// }`In fact it’s even more flexible. Thanks to orthodox, functional styles fit in seamlessly with Cycle.js, virtual-dom, Free style and every other hotness!
The idea is being tested out on a big production-ready style framework. It still needs some polishing – we’ll post concrete examples as soon as they are ready!
Meanwhile, don’t hestitate to weigh in!