css-in-js

I grepped the minified source code included in the page, and it looks like the project was built using React. React isn't opinionated on how you should handle component styling, and so the community has experimented a lot [0] with different solutions to managing CSS for components. One approach is to have the component set its own inline styles in the render function. This makes it easy to have the component's styles to be "reactive" to its props (arguments), e.g.: function MyButton({ importance }) { return ( <button style={{ color: importance === "high" ? "red" : "grey" }}> Click me! </button> ); } In my opinion, Christopher “vjeux” Chedeau makes the most cogent argument [1] for why this way makes sense. It's worth a read; even if you end up disagreeing with the conclusion. A related solutio

Here's also a pretty in-depth comparison on many other alternatives: https://github.com/MicheleBertoli/css-in-js

> what genius came up with the idea of inlining styles in a javascript bundle to begin with? All these, I guess... https://github.com/MicheleBertoli/css-in-js#features

I was referring to CSS-in-JS and what is coming out of it. https://speakerdeck.com/vjeux/react-css-in-js Not all of them use inline styles and a lot are library agnostic. Here are just some of the ones I have played with, plenty more exist. https://github.com/rofrischmann/fela https://github.com/FormidableLabs/radium https://github.com/Khan/aphrodite https://github.com/threepointone/glamor https://github.com/MicheleBertoli/css-in-js https://github.com/styled-components/styled-components https://github.com/css-modules/css-modules https://github.com/cssinjs/jss https://github.com/smyte/jsxstyle https://github.com/rtsao/styletron

I don't think everyone uses that distinction, see this list for example. Radium is included among others: https://github.com/MicheleBertoli/css-in-js Or this influential talk: https://speakerdeck.com/vjeux/react-css-in-js

> build or render-time extraction of CSS Render-time is waaaay too late. The ship has sailed at that point: so no, that doesn't take care of your first point. > Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors. I've yet to see one that comes even close to SASS - not even the same game let alone the same league - so agree to disagree here. > You should take a look at: https://github.com/MicheleBertoli/css-in-js I have - all it shows is that css-in-js is not a realistic competition for sensible modular CSS via something like SASS (CSS Modules, etc, good patterns).

This is simply not true. Many CSS-in-JS libraries support build or render-time extraction of CSS, which takes care of your first criterion. Many CSS-in-JS libraries also handle style modularization, often in ways arguably better than CSS preprocessors. There's a lot of variety here. I'm not sure what you mean by "faster than CSS". CSS can be fast or slow, depending on how the CSS is written. You should take a look at: https://github.com/MicheleBertoli/css-in-js

A very comprehensive list of CSS-in-JS libraries with code examples is maintained here: https://github.com/MicheleBertoli/css-in-js for folks who are interested. My personal favorite: https://github.com/rtsao/csjs

Here's another great comparison: https://github.com/MicheleBertoli/css-in-js I think that css-modules (implemented in webpack's css-loader) is the sanest approach: https://medium.com/seek-ui-engineering/the-end-of-global-css...

We've been using inline styles in our main project (built with React), but we recently deciced to move to css modules: https://github.com/css-modules/css-modules https://medium.com/seek-ui-engineering/the-end-of-global-css... Inline styles are great, but they don't support basic features such as pseudo classes/elements, so even implementing simple components like buttons was cumbersome. With latest version of webpack's css loader you get css scoping (you no longer need to add lengthy prefixes to all selectors) and you can also use additional loaders for post-processing your styles (we use a lot of postcss plugins such as autoprefixer). Have a look at this example: https://github.com/css-modules/webpack-demo And here's a great comparison of the main CSS in JS techniques: https://github.com/MicheleBertoli/css-in-js