In styling for the K2 Sidebar Manager page, I’m constantly having to work against the native WordPress stylings to achieve what I want. Whether this is because of styled form elements — a major pain in the ass — or simply an unexpected line-height, it inevitably causes some frustration when I’m trying to make things just right.
The valuable lesson here, and this goes for any other up-and-coming platforms as well: Keep your elements in containers and style specifically for those containers.
So, instead of simply styling p, div {line-height: 140%}, divide your pages into header, content and footer, or whichever configuration suits you the best. Then make sure you only style specifically for your containers, like so: .content p, .content div {line-height: 140%}.
That way, when people need to create something like the Sidebar Manager UI, they simply create a new container with the class of ‘SBM’, at the same level as the other containers, and they don’t have to worry about that 140% line-height.
The lesson is also:
Sorry, had to add that.
At least so long as there isn’t a reason for it :) — And in most cases, there isn’t.
Completely agree.
It’s how long since we (the Shuttle team) suggested this to the WP devs? A year? Two?
I haven’t researched this, but couldn’t you still create your container (ie. with class ‘SBM’) and then include the rule
.SBM * { /* reset everything */ }in the stylesheet for your own UI?
Unfortunately there is no easy way — if any way at all — to reset everything to defaults. Especially form elements.