Mastering theme.json: You won’t want CSS

I completely get the objective right here: make CSS extra modular and scalable in WordPress. Put all of your world WordPress theme types in a single file, together with variations. JSON provides a properly structured syntax that’s simply consumable by JavaScript, thereby permitting the candy affordance of loading precisely what we would like when we would like it.

The issue, to me, is that writing “CSS” in a theme.json file is an entire psychological mannequin switcher-oo. Fairly than selectors, now we have an entire set of objects now we have to learn about simply to pick one thing. We’ve got JSON properties that feel and appear like CSS properties, solely they should be camelCased being JavaScript and all. And we’re configuring options in the course of the types, which means we’ve misplaced a transparent separation of considerations.

I’m taking part in satan’s advocate, after all. There’s a whole lot of upside to abstracting CSS with JSON for the very area of interest goal of theming CMS templates and parts. However after a decade of “CSS-in-JS is the Method™” I’m much less inclined to purchase into it. CSS is the bee’s knees simply the best way it’s and I’m OK counting on it solely, whether or not it’s within the required fashion.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 write down types in a theme.json file, like fashion 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’ve got an entire information that Ganesh rocked a few years in the past. You would possibly examine that to get accustomed to some terminology, bounce right into a nerdy deep dive on how WordPress generates courses from JSON, or simply use the reference tables as a cheat sheet.

Mastering theme.json: You won’t want CSS initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the publication.