Question

I have been working with a few examples have been wondering what the benefits (if any) there are of setting your style by one specific element or attaching an id to it and setting it via that?
For example if we have this table:

<table>
    <tbody>
        <tr class="cat1">
            <th scope='row'><span id='s'>Table Data</span></th>
            <td class='tdh'>Table Data</td> 
        </tr>
        <tr class="cat2">
            <th scope='row'><span id='s2'>Table Data</span></th>
            <td class='tdh'>Table Data</td> 
        </tr>
    </tbody>
</table>

and wanted to style the span element we could grab the element by where it lies with the table:

table tr.cat1 span {
  some css;
}

or by the id:

#s {
  some css;
}

Are there any big differences in the way these actually work? I have found working with the id much simpler with a smaller margin for error, though I have found many examples of people using the former. Is there a specific reason for this? Or is it really just down to personal preference?

Answer 1

IMO opinion you want to avoid styling by ID at all costs, but i also subscribe to the OOCSS method of doing things that Nicole Sullivan has championed. Basically what it comes down to is that styles targeted by ID are not reusable, which usually starts to get out of hand and results in the exact same style declaration in multiple places, in addition to hijacking the specificity chain when they need to be overridden for certain cases. This article and that wiki page describes it in a much better way than im willing to outline here.