Tweaking WordPress CSS on the fly, revisited

In my earlier treatment of this topic, I recommended using CodeKit to try out CSS changes before committing them to your live site.

There is now another low-drag option that previously depended on the JetPack plugin (which should be using anyway), but now is built into WordPress.

The Customize menu has the option to add Additional CSS. This allows you to add (and change, if you have already made additions) CSS to your site separate from all your other style files. The big news is that as you add CSS to the Additional CSS field, WordPress immediately shows you a preview of how that additional CSS will affect the look of your site.

More than that, it has a syntax checker built in, with smart complete, which should really help cut down on syntax errors.

The only downside is that this Additional CSS is inserted inside a <style> tag in the head section of each page, so there is no caching possible. However, you can still use Customize -> Additional CSS to try out your changes, and then when you have it just the way you want, transfer the CSS to the style sheet in your child theme CSS file (typically, style.css).

Advertisements