Mastering Theme.json: You Might Not Need CSS

I fully understand the goal here: to make CSS in WordPress more modular and scalable. Combine all your global WordPress theme styles into a single file, including variations. JSON provides a well-structured syntax that can be easily used by JavaScript, providing the advantage of loading accurately What we want When we want it.

For me the problem is that writing “CSS” in a theme.json File is a complete mental model switcher oo. Instead of selectors, we have a whole bunch of objects that we need to know about just to select something. We have JSON properties that look and feel like CSS properties, except they have to be camelCased is JavaScript and stuff. And we configure functions in the middle of the styles, which means we have lost a clear separation of concerns.

Of course I play devil’s advocate. Abstracting CSS with JSON for the niche purpose of theming CMS templates and components has many advantages. But after a decade “CSS-in-JS is the way to go“I’m less inclined to get involved in it. CSS just is what it is and I can only rely on it to make sure it meets the requirements style.css file or any other plain old CSS file I create. But this also means that I miss out on the WordPress features that require you to write styles in one theme.json file, like Style variations This can be switched directly in the WordPress administrator.

Regardless, I’m linking this because (no surprise really) Justin does a great job explaining and illustrating the power of CSS in WordPress. We have a complete guide that Ganesh rocked a few years ago. You could check this to get it familiar with some termsjump into a nerdy deep dive how WordPress generates classes from JSONor simply Use the reference tables as a cheat sheet.

Direct link →