Best practice to include custom user styles in widgets

Question

What's the best way to include custom user styles in widgets? For example adjust colors for buttons, borders etc. without having the user to develop a complete new stylesheet.

Answer 1

I can't really speak to best practice, since I'm relatively new to WordPress (~1 year). But I am a website developer and I have been hacking around various widgets trying to make them behave the way I want. Here are my top 4 irritations:

• widgets/plugins that don't use wp_enqueue_style(). How can I get rid of your style if I can't dequeue it?
• class names on every single element. CSS means cascading style sheets. Wrap your output in a single classed element and use inheritance to style the children. Not only is it easier to debug, it's a lot easier to read.
• similarly, do you really need to assign an id to every element?
• non-semantic markup.

That said, my preference for WYSIWYG styling is AJAX based. Create a form with all the options you're willing to deal with. Put it beside a version of the widget output. Each change to the form, immediately shows on the widget. When the user is satisfied with the look, he can save his options.

For guidance on where to store options and how to generate CSS, the code in the Suffusion theme (files suffusion-css-generator.php, suffusion-css-helper.php & functions.php/suffusion_generate_all_custom_styles()) seems fairly straightforward and sensible.