You don't need CSS for that: All the ways you can use theme.json for styling

[justintadlock]

Some feedback from devs on a specific project (CC: @mikachan):

They weren’t aware of all the options available in theme.json and didn’t realise how much SCSS could be moved there.

While most of the options are documented in the Theme Handbook, those docs don't really show the various use cases. Sometimes, a walkthrough is needed for folks to understand how these pieces connect.

The goal is here to write a tutorial that's aimed at classic themers (and new themers) on really using theme.json to style their themes. The tutorial would cover things like:

• Defining presets (standard and custom) via the settings object
• Working with the styles object to design basic and more complex designs
• Using style variations (theme, block/section, color, and typography) instead of CSS
• When you must revert back to using CSS/stylesheets

Basically, we have the docs in place that describes what things are. Now it's time to show how to actually use them.

[bph]

This topic was approved in the 9/5 editorial group meeting. Please continue the conversation on the issue

• You don't need CSS for that: All the ways you can use theme.json for styling #308

[bph]

published: Mastering theme.json: You might not need CSS