Wandering Thoughts archives


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.

web/CSSAvoidIndirection written at 00:10:11; Add Comment

Page tools: See As Normal.
Login: Password:
Atom Syndication: Recent Pages, Recent Comments.

This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.