[DISCUSSION] I got tired of how easy it is to break a WordPress site with one bad CSS edit
I’ve been building WordPress sites for a long time, and one thing that has always bothered me is how little protection there is when editing CSS directly inside WordPress.
You can be working in Additional CSS or the theme editor, miss a closing brace, accidentally paste something malformed, wipe out a chunk of code, or make some other seemingly tiny mistake…
…and WordPress will quite happily let you save it.
Sometimes the result is minor. Sometimes half the layout goes sideways... and if you’re editing a live site, that’s a pretty unpleasant moment.
Obviously experienced developers have backups, version control, staging environments, etc. But in the real world, people still make quick CSS changes in production. Clients do it. Freelancers do it. I’ve done it. And WordPress itself doesn’t really give you much of a safety net at the moment you hit Save.
That got me wondering why there couldn’t be something sitting between the editor and the save action that essentially says:
“Hang on, this looks dangerous. Are you sure you want to save this?”
So I ended up building a plugin around that idea.
It scans CSS before it gets saved and looks for errors or patterns that are likely to cause serious problems. The really nasty stuff gets blocked, while less serious issues can just generate a warning.
I also added backup history and the ability to rollback because I figured detecting a problem is only half the battle. If somebody already screwed something up, getting back to the previous working version should be simple.
The plugin eventually became CSS Guardrail.
A few things I’m especially curious about:
- Do you think pre-save CSS validation is useful, or do most developers already have enough safeguards in their workflow?
- Would you rather a plugin like this aggressively block questionable CSS, or lean toward warnings and let the user decide?
- Are there particular CSS mistakes you see clients/junior developers make over and over?
- If you maintain a bunch of client sites, is this the sort of protection you’d actually install?
I have video demos of the plugin over at cssguardrail.com if anyone is curious to take a peek.