Oh, something else occurred to me I thought I’d point out, as via PM I must helped someone clean up a page where they had tons of bloated markup and tons of classes… for no reason. Lemme give you a quick example of the markup that was involved. The markup was the root of the problem even though he was asking me about CSS.
He had a table - now, there’s nothing wrong with tables for tabular data like an excel spreadsheet, it’s what they’re for… but I often say the problem with tables had nothing to do with it being a ‘hack’ but instead had to do with people not understanding how to build one properly or even realizing that there are more tags that can go inside a table than a TR and TD… I’m referring to CAPTION, THEAD, TBODY, TFOOT and TH – quintet of tags most developers seem blissfully unaware of…
To paraphrase his table (stripping out his data and turning his 10x40 grid into a measly 3x3):
<table id="someData" class="someData" cellpadding="0" cellspacing="4" border="1">
<tr>
<td colspan="4" class="title">Table Title</td>
</tr><tr>
<td class="empty"> </td>
<td class="columnHeader">Column 1</td>
<td class="columnHeader">Column 2</td>
<td class="columnHeader">Column 3</td>
</tr><tr>
<td class="rowHeader">Row 1</td>
<td class="data">Data 1-1</td>
<td class="data">Data 2-1</td>
<td class="data">Data 3-1</td>
</tr><tr>
<td class="rowHeader">Row 1</td>
<td class="data">Data 1-1</td>
<td class="data">Data 2-1</td>
<td class="data">Data 3-1</td>
</tr><tr>
<td class="rowHeader">Row 1</td>
<td class="data">Data 1-1</td>
<td class="data">Data 2-1</td>
<td class="data">Data 3-1</td>
</tr>
</table>
779 bytes
The class on the table wasn’t even used anywhere else… there was no reason to use a ID instead of a class, MOST of the values on the table declaration have no business even being IN the markup, and not ONE of the classes or attributes on his TD are neccessary.
His resulting CSS was something like this (no joke):
table#someData.someData { background:#CCC; border:1px solid #000; }
table#someData .title { padding:4px 0; text-align:center; background:#FCC; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000; border-bottom:0; }
table#someData .colHeader { font-weight:bold; padding:2px 6px; border:1px solid #000; background:#CFC; }
table#someData .rowHeader { font-weight:bold; padding:2px 6px; border:1px solid #000; background:#CCF; }
table#someData .data { padding:2px 6px; border:1px solid #000; background:#FFF;
table#someData .empty { background:none; border:none; }
608 bytes
…on top of ‘table#someData.someData’ being wasteful (and a serious whiskey tango foxtrot), there’s hordes of redundant values being declared like the padding that could simply be attached to every TD.
So as I often say, the first step is to fix the HTML. That first colspan TD should be the CAPTION, the next row should be TH inside a THEAD, the .empty can be targeted as a TD, .rowheader should be TH inside TBODY, while the remaining .data TD can simply be TD.
<table class="someData" cellspacing="4">
<caption>Table Title</caption>
<thead>
<tr>
<td></td>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>Data 1-1</td>
<td>Data 1-2</td>
<td>Data 1-3</td>
</tr>
<tr>
<th>Row 2</th>
<td>Data 2-1</td>
<td>Data 2-2</td>
<td>Data 2-3</td>
</tr>
<tr>
<th>Row 3</th>
<td>Data 3-1</td>
<td>Data 3-2</td>
<td>Data 3-3</td>
</tr>
</tbody>
</table>
530 bytes
Provides ALL the hooks we need to apply that styling… and the ONLY reason we have to use cellspacing is that FF and IE are BOTH still complete retards about handling the border-spacing CSS attribute.
The CSS for that is simplified down too.
.someData {
background:#CCC;
border:1px solid #000;
}
.someData caption {
text-align:center;
padding:4px 0;
background:#FCC;
border:solid #000;
border-width:1px 1px 0;
}
.someData th,
.someData td {
padding:2px 6px;
border:1px solid #000;
}
.someData thead th {
background:#CFC;
}
.someData thead td {
background:none;
border:none;
}
.someData tbody th {
background:#CCF;
}
.someData tbody td {
background:#FFF;
}
469 bytes
Basically by getting rid of every class except the one on the outermost container and the extra bits we don’t need in the CSS like saying what tag the ID or class is on, we not only reduced the markup by 32% (more like 60% on his 15x40 table), it shaves 23k off the CSS. If you format the CSS the same way as his original, it only sheds 30 more bytes! (why bother)
It illustrates something I was saying earlier – a firm grasp of the basics of HTML is the first step to writing good CSS. To flog the deceased equine, CSS is only as good as the markup it’s applied to… especially if you exploit the advantages of semantic markup and the ‘cascading’ part of Cascading Style Sheets.
For reference, I took his page which had little to no formatting and was 90k of markup and 30k of CSS, and dropped it to 20k of each. It was literally an example of “not every ejaculation deserves a name” being represented as “not every TD needs a class”… or should even be a TD for that matter. It’s like when you see
<p class=“heading”><b>My Heading</b></p>
You just want to take them across your knee with a paddle at that point. :kaioken:
No, I think I read it right given your examples you’ve completely missed the POINT of CSS and by practicing adding/removing classes in the markup instead of properties in the CSS, you do NOT have separation of presentation from content or modern coding techniques. I’m willing to bet your CTC ratio is in excess of 6:1 after doing that. If you have to change your markup to flip something like a float, you completely wrote your markup wrong / decade PLUS out of date in the first place!
If you’re setting a bunch of things the same, always remember that thanks to specificity and source order you can change it again later targeting just the single element - WITHOUT going into the markup. That’s kind of the point of CSS.
… I don’t think you will find much opposition on that front. I never understood it either. What would you think it’s Code-to-Content ratio be one of these grids then? 
