[wp-hackers] best practices for plugin styles

[John Blackbourn]

On 15 February 2011 15:52, Phil Hart <radial at mindspring.com> wrote:
> Thank you for the link but this doesn't answer my what we're looking for.
>
> We are looking for an example of the class and style naming conventions our
> developer would use to code the table output.  We're not looking for the
> start of the encyclopedia on css.  What were looking for is an example of
> how we should output our table so theme developers can style it as they
> wish.

If you're looking to give theme developers as much control over the
style as possible then here are a few tips:

1. Use semantic markup. This means <thead> and <tbody> elements for
the table heading and body respectively, and <th> elements (instead of
just <td>s) for row and column headers. Many (most) themes will have
CSS rules for styling tables nicely, and using these elements means
the table will look half decent before you've even added any class
attributes to the table.

2. The "person.2.name" class name in your example is terrible. It
means a style sheet would need an infinite number of rules to cover
all possible number of rows. Class names are good though - stick theme
everywhere. If you take out the numbers in the class names in your
example (and replace the dots with dashes or underscores) then you're
well on your way.

3. Put a class name prefixed with the name of your plugin on the
<table> element. This makes it easy to target the specific tables
output by your plugin. For example, awesome_plugin_table.

Beyond that, a good method would be to try to style the table yourself
with CSS. If you find you don't have classes or elements in the right
place then add them in. Don't forget you might want to include <span>s
around any headings in case the theme wants to use an image
replacement technique.

HTH,
John