you are looking for
There is a lot of hype around CSS Modules and that is a good thing. However the issues with writing maintainable CSS are more than those solved by CSS modules.
Warning : Opinions Follow
Really just removes naming conflicts
First there was Less / Stylus / Sass / Something else. The only thing CSS Modules offer on top (in honesty) is preventing name collision (at least that was their origin). You could have always avoided those with clever class naming (but no one wants to type `myorg-` or cm- right).
That’s it.
There is still absolutely nothing stopping a developer/designer from going deep into your element tree to style that one label they want changed.
There is absolutely nothing stopping a developer from committing a `css` file change with the only possible meaningful code review being “it work?” “yes”.
And there is still stuff that we know in JavaScript that you have to end up reinventing.
Its the whole `<div some-if=”condition”` vs . JSX `condition && <div` again.
JavaScript is strictly a more powerful language to extend than HTML.
And its still CSS (and that’s okay).
Beautiful, Cascading, let the browser vendor decide the edge case implementation, CSS.
But now with an additional layer custom to CSS modules. Will the following typo be an compile time error or a runtime `undefined`:
I don’t know. But if it was TypeScript (or your favorite JavaScript linter) it would be a compile time error.
But the style attribute is not enough
Because that is what browsers understand. There are things that you just can’t do with `inline` styles (media queries, pseudo state selectors). So there really are only two other kinds of solutions
- Those that throw more JavaScript at the problem
- Those that generate the CSS file from JavaScript
Radium is not the solution
It approaches the problem by throwing more JavaScript at it. It’s only really an option if you are using React. But even then because it throws more JavaScript at it, it can have interop issues as well as difficulty finding that ultimate way to hook in and even maintaining that ultimate hook between react versions.
The solution
Generate the CSS file. There are a few options. I wrote a simple one that mimics the CSS modules pattern but this time using just JavaScript objects : https://github.com/typestyle/typestyle
Additionally, because you write JavaScript objects instead of back tick quoted stringly CSS in JS. That means you get JavaScript extensibility, constant reuse and code analysis. (In addition to other stuff that other JavaScript based solutions provide like modules).
And the migration doesn’t have to be hard.
And its not React specific.
Its like redux, but for CSS
A simple abstraction over a complex problem. If you need more reasons we have you covered there as well.
Footnotes
Horrible code can be written in any abstraction
So use your judgement. And that will fail you. But its okay. In the end I’d rather review a JavaScript (*cough* TypeScript) file.
If you liked this, go ahead and share the love by clicking the heart below
