I completely get the aim right here: make CSS extra modular and scalable in WordPress. Put all of your international WordPress theme kinds in a single file, together with variations. JSON affords a properly structured syntax that’s simply consumable by JavaScript, thereby permitting the candy affordance of loading precisely what we wish when we wish it.
The issue, to me, is that writing “CSS” in a theme.json file is an entire psychological mannequin switcher-oo. Quite than selectors, we now have an entire set of objects we now have to find out about simply to pick one thing. We have now JSON properties that appear and feel like CSS properties, solely they must be camelCased being JavaScript and all. And we’re configuring options in the midst of the kinds, which means we’ve misplaced a transparent separation of considerations.
I’m enjoying satan’s advocate, in fact. There’s plenty of upside to abstracting CSS with JSON for the very area of interest function of theming CMS templates and elements. However after a decade of “CSS-in-JS is the Means™” I’m much less inclined to purchase into it. CSS is the bee’s knees simply the way in which it’s and I’m OK counting on it solely, whether or not it’s within the required type.css file or another plain ol’ CSS file I generate. However that additionally means I’m shedding out on the WordPress options that require you to put in writing kinds in a theme.json file, like type variations that may be toggled instantly within the WordPress admin.
No matter all that, I’m linking this up as a result of Justin does bang-up work (no shock, actually) explaining and illustrating the methods of CSS-in-WordPress. We have now an entire information that Ganesh rocked a few years in the past. You may examine that to get accustomed to some terminology, leap right into a nerdy deep dive on how WordPress generates courses from JSON, or simply use the reference tables as a cheat sheet.
Direct Hyperlink →
