Back in the days of yore (gosh, all of 5 years ago), I joined a team at work that built an internal website. We used CSS, JavaScript, and JQuery, and we rolled our own "user-editable" component library.
The JavaScript became TypeScript.
The "user-editable" component library gathered dust as we were finally able to build customized pages for our various internal customers. (Of course, we're still using it. But there are fewer and fewer pages where we use it, and we occasionally get to delete a component here and there.)
The JQuery became React (with MobX for state management).
A new component library was created. They're widely-but-not-completely adopted.
And now it's time for that CSS. After some debate, we're going for a CSS-in-JS solution (MergeStyles), and I'm the sucker who's doing the upgrade.
The CSS is a bit of a mess: there are now about 800 TypeScript files, and there never were any serious guidelines for writing CSS. The only guidance was "Don't use the style attribute (mostly), our colors are %THESE%, and there's some basic styles over %THERE%", so our CSS is a bit unwieldy: there's a handful of top-level CSS files, and then everyone created individual CSS files for various sections of the website. So the CSS is pretty well fragmented, with multiple naming conventions and a half-assed inclusion of Fabric 1.0 somewhere in there. (For bonus points: we occasionally let external teams edit our website. The results range from "that's a front-end dev with different ideas" to "that guy doesn't do front end development at all, but we made him do it anyway" to "eh, we have access to your repo, so we created the pages we need without coordinating with you at all." We usually managed to get them to submit to code review, at least. Occasionally, they'd set up the code review when there was still enough time to make serious edits.)
I've read plenty of articles about how great CSS-in-JS is, and how it'll objectivize my paradigm while energizing my ley lines, but I can't find any guidance on how to migrate a large project to CSS-in-JS. Heck, I'm not even really sure how to take an inventory of my project's CSS, to see if I can reduce the duplication. (And for that matter: is it actually a good thing to reduce duplication? Most of the CSS guides I read mention creating CSS specifically for the component you're working on, rather than making more global styles.)
So where do I start on getting a decent-sized website into CSS-in-JS? Or am I better off just giving up on huge steps, and migrating to SCSS/Sass instead, just to get the CSS variables?
Edit: Also, that component library isn't particularly comprehensive. It has a decent list of useful things, but not a whole lot of "page layout" components. That top-level CSS gives us some general page layout, and it picks all of the fonts/colors/font-sizes, but just about every page in the site has its own layout CSS and a slightly-different style. The task of unifying the site's CSS is somewhere between "huge task where we build standard layouts and then refactor every page to use those layouts" and "Just copy the CSS around until we're superficially using CSS-in-JS without actually changing a whole lot, but while still spending large amounts of time to touch almost every component."