Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?
-
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."
-
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
how great CSS-in-JS is,
Tbh I've never heard of such a thing. And it sounds horrible.
-
All You Need To Know About CSS-in-JS | HackerNoon
TL;DR:<em> </em><strong>Thinking in components — </strong>No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
-
@pie_flavor interesting. I wonder if I can try @Zenith's challenge with this. Maybe tomorrow if I'm bored.
-
@Tsaukpaetra said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
how great CSS-in-JS is,
Tbh I've never heard of such a thing. And it sounds horrible.
With React/JSX, we already moved the HTML into the JS. Why stop there?
Indeed, why stop with CSS? Surely we need the browser made from JS. And the OS. And the device drivers. And the hardware!
-
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
Indeed, why stop with CSS? Surely we need the browser made from JS. And the OS. And the device drivers. And the hardware!
How about NO
-
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
And the OS.
JSOS Saves!
-
@PJH said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
And the OS.
JSOS Saves!
JSOS Christ!
-
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
Indeed, why stop with CSS? Surely we need the browser made from JS. And the OS. And the device drivers. And the hardware!
Where is my Reality.JS? This world is clearly unrealistic
-
@Tsaukpaetra said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
how great CSS-in-JS is,
Tbh I've never heard of such a thing. And it sounds horrible.
As a general rule, if you have X, adding JavaScript to it does not improve it for any value of X.
-
@Mason_Wheeler said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@Tsaukpaetra said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
how great CSS-in-JS is,
Tbh I've never heard of such a thing. And it sounds horrible.
As a general rule, if you have X, adding JavaScript to it does not improve it for any value of X.
I did find a use for it, the very first time I thought of it: easy generation of brighter/darker colors from an existing color, a ~month ago. Have one base color, and generate the CSS classes for border/background/text colors as I needed them. (It's actually "have an array of base colors, and pass the color to the thing generating the HTML", if you must know.)
...and then the designer on the team came up with specific darker colors that actually met the accessibility guidelines, and my work to use programmatically-generated lighter/darker colors was for naught. Oh, well. Still, the color-matching code is stuffed into the CSS-generating code, so it's still one less headache.
-
@Mason_Wheeler said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@Tsaukpaetra said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
how great CSS-in-JS is,
Tbh I've never heard of such a thing. And it sounds horrible.
As a general rule, if you have X, adding JavaScript to it does not improve it for any value of X.
TDWTF.JS
-
@PotatoEngineer said in Is there a sane way to migrate from raw-CSS to some CSS-in-JS thing?:
Surely we need the browser made from JS. And the OS. And the device drivers. And the hardware!
I eagerly await the day when I can directly call
KeBugCheckEx()from JavaScript in a public website.
OS.js
