Recently, I was tasked with completing a WordPress site that was using WooCommerce, Gravity Forms, and a Gravity Form plugin for WooCommerce. The site was nearly complete when I started working on it; there were just a couple things that needed polishing.
When I was handed this project I was told that the previous developer (an outside contractor) had been having a hard time getting all form elements styled consistently across the site. To be honest, upon hearing this I was’t convinced the previous developer had been the “expert” he claimed to be. After all, CSS for any seasoned web developer shouldn’t be rocket surgery.
Opening the style.css stylesheet in Coda 2 (imo the best IDE) it was clear what had happened… like a bad episode of CSI, my screen was spattered with thousands of crimson !important style rules. 1,917 of them to be exact, and seeing this made me feel bad- really bad.
The website was using about a dozen forms that were being generated by 3 different plugins. The previous developer had worked through what must have been countless hours of frustration trying to define style rules that would apply to all form elements only to have some rules take and others be ignored. Refusing to be bested, the developer pulled out the big guns: the infamous and hotly debated !important rule. Unfortunately, this too proved to be ineffective as the forms still looked disheveled and mismatched; like Thom Yorke drew them by hand while dancing.
The previous developer had made the same mistake that I myself have made countless times in the past; they forgot to take into account that some WordPress plugins generate their own CSS. To make things worse, the order in which a plugin’s CSS is imported means that resistance is futile (thanks Borg). Fortunately, this CSS can usually be switched off in the plugin’s options panel. If for some reason the option doesn’t exist, you could just locate the source of the offending CSS and comment it out. If you end up doing the latter, keep in mind that any future updates to the plugin will likely undo your commenting out of the code.
This project has reminded me of one !important lesson; you don’t know what you don’t know. It wasn’t that long ago that I experienced the same situation; in my case it took me two days and a new keyboard before I figured out what was happening.