The Best Way To Represent key/value Pairs In HTML Class Names

Question

I am binding things to HTML objects using javascript and need a slightly more sophisticated mechanism than just class names.

My first approach was to use class names like structure declarations where the binding is on name position as so:

Definition = identifier: foo bar baz

Encoding some class name with this definition gives

<p   id="someid"    class="identifier bish bash bosh">
<div id="anotherid" class="identifier heebie jeebie">

This can then be read as:

{foo: bish,   bar: bash,   baz: bosh};
{foo: heebie, bar: jeebie}

Note that the bindings have different numbers of parameters.

This is very fragile. I can't decorate any html elements with additional names (for instance to add jquery behaviours like drag and drop, etc, etc) and is generally a bit shoddy...

What I would like to do is represent them as key value pairs like so:

<p   id="someid"    class="id{foo:bish} id{bar:bash} id{baz:bosh} random class">
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}">

Which allows me to have random positioning and random length of class names on elements provided my id is a sorta GUID (but I can 'make that so' manually easily enough...)

Now, in theory, classnames are CDATA, so everything should be tickety-boo, but I hae ma doots! particularly on the old cross-browser side...

Advice, suggestions, prior art, best practice on the best syntax for KV pairs in class names all gratefully received.

Answer 1

HTML5 is going to add data-* attributes for just this purpose, and these already work in every browser today (but might send some validators for a loop).

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>