Since the single selector "b" is used for selecting the extra
rounded corners markup, all use of the <b> tag in it's
original use fails miserably unless the css is overwritten for
certain areas.
While the inability to use <b> in other contexts certainly
isn't a problem for most front-end developers, we aren't the only
ones writing content for the sites we develop (quite often we don't
even touch the content). The content could (and proberably will) be
generated by a variety of sources: directly from users, developers,
management, through a CMS or news aggregator. Thus resulting in
malformed content whenever a <b> is present.
So, my suggested solution is to add a few bytes and avoid
obvious content-problems, like so:
.top, .bottom, .tl, .tr, .bl, .br {display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
Yes, it will make the selectors for the module skins a bit
longer, but that's a small price to pay for the added unobtrusivity
(is that even a word?) :)
Nice OOCSS aproach, btw :) Cheers!