[wp-hackers] best practices for plugin styles

[Otto]

On Tue, Feb 15, 2011 at 9:52 AM, Phil Hart <radial at mindspring.com> wrote:
> 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.
> ...
> I have no idea if the above is right, I'm just trying to show example.  We
> aren't sure should and where we should use classes as opposed to styles or
> id's.  We are looking for examples of what theme developers would want us to
> use in our table code so they can apply proper css to the fields we provide.


This is more of a generic CSS question, really. But basically here's
some general guidelines:

- If an item is unique and has a chance of being styled uniquely, give
it a unique ID, one that won't be used anywhere else on the page. In
your example, you used "person.1" as a class. This is wrong, because
there's only one person with person.1. You should have used person-1
as an ID on the main wrapper.

- A class should be generic and shared. In your example of
"person.1.name", that's a terrible class design. A better way would be
to put just "person" on the td wrapper, then "name" on the p wrapper
around the name. This could then be referenced in CSS as td.person
p.name, for all of the person names.

- Use of dots in classnames like you did is bad. Use dashes, like
some-thing instead. But still, you shouldn't have multiple information
classes like that anyway.

Here's a better example of correct semantic markup:

<table class="staff">
<tr class="person" id="person-1">
<td class="face">
<img class="pic">
</td>
<td class="info"
<p class="label name-label">Name:  </p><p class="name">Joe Blow</p>
<p class="label email-label">Email:  </p><p
class="email">joeblow at example.com</p>
</td>
</tr>
<tr class="person" id="person-2">
<td class="face">
<img class="pic">
</td>
<td class="info"
<p class="label name-label">Name:  </p><p class="name">Joe Blow2</p>
<p class="label email-label">Email:  </p><p
class="email">joeblow2 at example.com</p>
</td>
</tr>
</table>


-Otto