I have an application where I need to style a series of link along three axis (color, background, and borders) depending on properties of the links. Furthermore the styleshee needs to be easily customized or easily machine generated. There will be pages with hundreds of these styled links so efficient representation is important.
So the simpliest option is just to just triply-nested span's around the link, with a class that turns off all styling of the link element. However this method imposes a huge overhead of tag/styles ie
Code: Select all
<span class="axis1-1"><span class="axis2-4"><span class="axis3-2"><a class="no-style" href="">Entry</a></span></span></span>
Not what I think anyone would call efficient.
My next thought was the style the link directly and create the full realm of triple-cross-products in the style sheet so the above would look something like
Code: Select all
<a class="opt1-opt2-opt3" href="">Entry></a>
The different options are easily encoded to two characters apiece, so this would only add 16 characters per link which is also less than the current non-compliant solution in use (lots of font tags, etc). Of course this options makes a very messy and long style sheet, but at least its only downloaded once per client. It would easy for a manually editor to missing an option, however, and leave the stylesheet in an inconsistent state; however computer generation would be simple.
Does anyone have any other suggestions?