== Today's learning experience with CSS: don't be indirect

This is today's learning experience and I will preface it by saying that
I am probably doing things wrong and in not the right CSS way. I will
present this as a story.

Once upon a time, you write a wikitext to HTML converter and with it
some associated CSS. Your wikitext has tables and the tables should
be styled in a certain way, so you wrap the entire generated wikitext
in a <div class="wikitext"> and write a CSS rule:

> .wikitext td { border: 1px; border-style: solid; padding: .3em; }

These tables come out with a nice 1 pixel solid border the way you
wanted and also the right padding around everything to look nice.

Your wiki also has some tables that it generates outside of the
wikitext. They have HTML like <table class="blogtitles"> and
CSS to style them the way you want:

> .blogtitles td { padding-bottom: .5em; vertical-align: top; }
>
> .blogtitles td + td { padding-left: 0.5em; }

These tables also come out with the right padding and no border, the
way you want them to.

Then much, much later you decide that you want to embed a blogtitles
table in the generated wikitext, wrapped in that great big wikitext
<div>. You render the whole thing and lo, your blogtitles table comes
out looking horrible. For a start, it has borders.

Well, of course it has borders. You said to give it borders: 'every <td>
inside a wikitext <div> should have borders' says your CSS, and right
there is a (blogtitles) <td> inside a wikitext <div>. Similarly your
blogtitles table has all sorts of padding it 'inherited' from (general)
wikitext tables. The results of combining the blogtitles CSS with the
wikitext tables CSS is probably nothing like what you wanted (and may
not look very good).

Your problem (ie, my problem) is that you were indirect when you did
not want to be. 'Any <td> inside my <div>' is an indirect way of
specifying 'wikitext tables', and as an indirect way it runs the danger
of being too general. Which is what happened here. Blogtitles tables
are conceptually a completely separate thing and should be styled
independently from your regular wikitext tables, but they are being
swept up in your dragnet.

The right solution, at least in generated HTML, is to be direct.
Generate your wikitext <tables> with an an actual class (eg <table
class="wikitable">) and then write CSS on that. The CSS doesn't even
have to change much. In short, ~~say what you actually mean~~. You
didn't really want to style every <td> inside your wikitext; you wanted
to style your wikitables. So you should say this directly (in CSS and in
classes) and save yourself a certain amount of hassle and annoyance.

(There is probably a really clever way to fix this in CSS that I don't
know because I'm mostly CSS-ignorant. Note that I don't consider
carefully trying to undo the wikitext table settings to be a clever
way.)

The ice is thinner for HTML that isn't automatically generated, because
putting classes on things is somewhat more annoying there (especially if
you may have a lot of them). I don't pretend to have a nice answer there.