Hi! I saw your reply to nostalgebraist's post about tmblr's keysmash id thing and I was wondering if you would be kind enough to help me understand a couple things: 1. what *is* css-in-js? I assume it is more than just "how you handle CSS in JavaScript"?, and 2. what is the benefit to tumblr (or anyone) doing it this way?
sure! so basically when you're using a component based JS framework, you generally want to colocate your CSS styles with your UI components. There are a couple of reasons for this—a big one is that JS modules have more levels of hierarchy then CSS, where everything shares are global namespace. so you can have a "post" css file that can include a .link style and .submit-button style without worrying about it overlapping with your sidebar links and your login form's submit button (Because the JS library rewrites them to be unique based on which file they come from). So that's an immediate benefit—being able to have local reasoning and local names instead of having to reason globally with global names. Another benefit that some frameworks have is putting your CSS styles on the "same level" as your UI component logic—so for example you can have a Post component and it could contain a Link component, but the former is mostly like, event handlers and data stuff and the latter is mostly CSS styles. This brings all of the other benefits of componentization—it encapsulates your styles into reusable containers with a defined public API (parameters you can pass in).
The reason I don't like the way tumblr does CSS in JS is that the framework they use does the first thing, but not the second. I think if you're using a component based UI framework, you gain a lot of benefit from treating your CSS styling as a component with a defined public API, and structuring your styles very strictly in that way. (It's also possible to structure your CSS files this way, without using CSS-in-JS, by bring strict about your naming and selectors ala BEM styling)
In contrast, Tumblr is basically just writing normal CSS files, but with modularization. This has the benefite that it's a pretty small adjustment from writing normal CSS, but it has the downside that you're likely to carry over your bad habits, writing tons of descendent selectors (relying on the global ish state of the page, making your components hard to reuse out of their style context),
anyway moral of the story use styled components it's great.
cool so that was a lot of words, let me know if that makes sense/answers your question! and feel free to ask follow up questions if things are unclear
