SuzyUK - 2:15 pm on Dec 13, 2009 (gmt 0)

But perhaps that's not what you were suggesting.

No it wasn't, sorry for not being clear.. say at the time of programming you know that your elements are likely going to need some sort of "fluff" added but that's for the designers to know .. you can add the extra class as an extra hook - though actually you don't need to add it at all if the ID's are already in in the right places, so what I'm actually doing here is being slightly contradictory to how I personally would do it.. will try to show example of each, and let you all decide for yourselves, please read that Steve Souders document too

e.g. my sample code above extended (using fluff as classname instead of the misleading pad)

<div id="sidebar"> <div id="cars"> <h3 class="fluff">Ford</h3> <h4 class="fluff">Escort</h4> <h3 class="fluff">Toyota</h3> <h4 class="fluff">Yaris</h4> </div> <div id="ipods"> <h3 class="fluff">Nano</h3> <h4 class="fluff">8GB</h4> <p class="fluff">now you want to put some text in here</p> <h3 class="fluff">Touch</h3> <h4 class="fluff">32GB</h4> </div> <ul class="fluff"> <li>...etc</li> </ul> </div>

Now I could already target all those elements inside the sidebar without the need for those extra classnames at all, which is what I would do, but it would involve descendant selectors, and grouping descendant selectors in order to reuse the code.. (that will throw the inefficient CSS warnings in Page speed) - I can also specifically target just the iPod bit if say I wanted to highlight it on special offer week or something like that, all from the CSS no need to change anything

However, to avoid the "warnings" and others may find it easier to reuse code using the "fluff" class/hook to add any common properties

i.e.
/* first the reset - mainly for any list defaults */
.fluff {padding: 0; margin: 0; list-style: none;}

.fluff {
padding: 5px 10px;
color: #000;
background: #fee;
font-weight: normal;
}

then you decide that only the h3's are going to be a different color and bold

h3.fluff {
color: #f00;
font-weight: bold;
}

in other words I've reused the "fluff" class and still been able to target it - the Page speed tool will now show a warning on an overly qualified selector

and then if you simply want to target the iPods h3

#ipods h3.fluff {
color: #00f;
}

and now you'll get the double warning back again, descendant and overly qualified, which in this case would be right as you don't need the class name attached to this selector because the ipods ID would work to make it more specific.

So this efficient targetting will be no different than doing it without the classes except that most of the elements which have the 'fluff' class attached will no longer be showing the Page Speed warning, which will make people happier?
(note: it probably should also be advised to use a different classname per section of the site say fluff-ls, fluff-rs, fluff-main, to avoid using the ID's as descendant selectors! :o - this is what I mean about how this method quickly becomes inefficient CSS!)

The other way to do it so you see no warnings at all is to add a unique classname to each and every element on the page (not just the tag) so that every line of code will always be uniquely targettable - then reuse the code by grouping these unique classnames.

sample of that seeing as it's Sunday and I'm well organised with my Xmas Shopping this year ;)

<div id="sidebar"> <div id="cars"> <h3 class="f1">Ford</h3> <h4 class="f2">Escort</h4> <h3 class="f3">Toyota</h3> <h4 class="f4">Yaris</h4> </div> <div id="ipods"> <h3 class="f5">Nano</h3> <h4 class="f6">8GB</h4> <p class="f7">now you want to put some text in here</p> <h3 class="f8">Touch</h3> <h4 class="f9">32GB</h4> </div> <ul class="f10"> <li class="f11">...etc</li> <li class="f12">...etc</li> </ul> </div>

i.e.
/* first the reset */
.f10 {padding: 0; margin: 0; list-style-none;}

.f1, .f2, .f3, .f4, .f5, .f6, .f7, .f8, .f9, .f10, .f11 {
padding: 5px 10px;
color: #000;
background: #fee;
font-weight: normal;
}

then you decide that only the h3's are going to be a different color and bold

.f1, .f3, .f5, .f8 {
color: #f00;
font-weight: bold;
}

Now you're re-using the code again, all with classes alone so no Page Speed warnings ;) and you can uniquely target any particular elements say for one off special offers or warnings without touching the HTML, but I think you'll agree that while this solution will keep everyone happy, it's not exactly the most efficient way to use CSS.

and just for comparison,
without the classes mine would have looked like this:
/* first the reset */
#sidebar ul {padding: 0; margin: 0; list-style-none;}

#sidebar h3, #sidebar h4, #sidebar p, #sidebar ul {
padding: 5px 10px;
color: #000;
background: #fee;
font-weight: normal;
}

then you decide that only the h3's are going to be a different color and bold

#sidebar h3 {
color: #f00;
font-weight: bold;}

and to target the ipods div
#ipods h3 {
color: #00f;
}

This will throw Page Speed 'warnings' - but by judicial placing of ID's and without the need to know styling at programming time (separation of style from content anyone) the same result will be achieved. This style of coding will not slow down your pages, it will result in smaller file sizes, both HTML and CSS, to a degree but even that will not make a difference to your Page Speed

it also leaves room for the introduction of more specific selectors should the need arise, so for example in my code where I have #ipods h3 after #sidebar h3 in the stylesheet, it'll work because of the Cascade, if the ipod specific CSS can't be put after the rest of the sidebar CSS (i.e. a different sheet that gets called before the main sheet or whatever other programming reason) the #sidebar #ipods h3 will work no matter where it is.

because the selector is read from right to left the quicker you can make it unique the better, the more efficient it
will be but don't stop using descendant/child selectors just so you get that green tick from Page Speed ;)

and if you do need to get more specific by adding in another parent into the selector because the information is already in the HTML Document, Do It! Or else ask yourself is it worth the time and effort to recode both files to fit with their ideas, will it really speed up the page?

edit reason: typo in code!

[edited by: SuzyUK at 9:54 pm (utc) on Dec. 15, 2009]