I am under the impression that the best way to style a list item is to wrap its content, apply a style to ol, and override that style via the wapper (as discussed on http://stackoverflow.com/questions/862878/make-abc-ordered-list-items-have-bold-style).
This is straightforward and fine, but since relative sizes are calculated based on inherited size, the "overriding" step requires a degree of otherwise unnecessary coupling between the li and its content. For instance:
HTML:
<ol>
<li><p>First item</p></li>
<li><p>Second item</p></li>
</ol>
CSS:
ol {
font-size 2em;
}
p {
font-size: .5em;
}
The above would correctly double the font size for the ol, and cut that doubled size in half for the contained p (i.e. it would maintain the original size). Hopefully you can see the issue here -- if I wanted to triple the font size for the li I would also have to change the p's font-size to .33 to counter the relative increase.
I would like to use relative sizes in the name of best practice, but would also like to avoid this obnoxious coupling. Is there a way I can have my cake and eat it too? I know it isn't a big deal, and normally this is just how relative sizes work, but the coupling resulting from what is almost a hack to begin with makes me feel somewhat dirty so I thought I would ask around.