homepage Welcome to WebmasterWorld Guest from 54.204.77.26
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Use efficient CSS selectors
Very efficient rules or inefficient rules
Alternative Future




msg:4039427
 12:46 pm on Dec 8, 2009 (gmt 0)

Greetings

Google speed check is asking me to correct the following rules i have in place:

ul.tabs li a
Tag key with 2 descendant selectors and Class overly qualified with tag

ul.tabs li
Tag key with descendant selector and Class overly qualified with tag

#lefties ul li span
Tag key with 3 descendant selectors

Can anyone explain to me what is wrong with the above, and what would be the correct way on doing this?

TIA

-Gs

 

vincevincevince




msg:4039463
 2:10 pm on Dec 8, 2009 (gmt 0)

ul.tabs li a
> do you have anything answering: 'ul.tabs a' ? if not, then the 'li' is not needed

ul.tabs li
> do you have any li within an element of class 'tabs' of a type other than ul? (e.g. <div class='tabs'><li>...)? if not, then the 'ul' is not needed

#lefties ul li span
> Similar to the above: are there any spans in #lefties which are not in UL and LI? if not, then just write #lefties span. At the most, it should be #lefties ul span

It may be they can be shortened as follows:
.tabs a {}
.tabs li {}
#lefties span {}

Alternative Future




msg:4039468
 2:19 pm on Dec 8, 2009 (gmt 0)

Hi vincevincevince

Thanks for your speedy response :)

I have the following in my html:

<ul class="tabs">
<li><a title="about" id="abouttab" class="tab active">About</a></li>
<li><a title="features" id="featurestab" class="tab">Features</a></li>
<li><a title="contact" id="contacttab" class="tab">Contact</a></li>
</ul>

>> do you have anything answering: 'ul.tabs a' ? if not, then the 'li' is not needed
>> do you have any li within an element of class 'tabs' of a type other than ul? (e.g. <div class='tabs'><li>...)? if not, then the 'ul' is not needed
From the above supplied example, it would be safe then use to use your suggestion?

I am at my 9-5 just now therefore can't try it out - so i am just making sure it is safe to proceed before i get home in the evening.

Once more thanks very much :)

-Gs

SuzyUK




msg:4039473
 2:34 pm on Dec 8, 2009 (gmt 0)

nothing is wrong.. Google is just being over zealous as usual :)

basically they are saying they would like us to add class names to every single element and use them in our CSS instead of the descendant (or any other type of existing) selectors.

As for qualifying the selector, that's where you are using ul.classname they are saying not to use the ul (just .classname)

It may well be you don't have to use the element to qualify the selector if you are only using that classname in one place (like an ID). but if the classname AND CODE is to be reusable such selectors would need to be qualified, - So which is to be reusable code or more classes? ;)

Honestly I'm fed up with SE's dictating how we should write/use CSS it's nothing to do with them.

Interestingly Steve Sounders (ex Yahoo now Google) ran some tests on "inefficient" selectors and found that you would need thousands of elements and CSS before the type of selectors is likely to affect the speed of any site in a noticeable fashion.
Source [stevesouders.com]
.. For 70% or more of todayís users, improving these CSS selectors would only make a 20 ms improvement.

Keep in mind - these test pages are close to worst case.

and later in the replies he does advise (answering someone asking about a tag cloud with hundreds of links)
paraphrased

Q. Would you prefer using the rule
#tag-cloud > a OR .tag-cloud-link

A: If the styling is not inherited and the page doesnít has only a few hundred A tags, I would do #tag-cloud > A. If the page has thousands of A tags, I would do the class.

so again backing up the theory that it would take literally thousands of elements to make this worthwhile?

FWIW I ignore those warnings, I like my descendant selectors and child selectors both for keeping style sheets neat and also maintaining specificity - also I consider this not yet proved enough to spend any extra coding time needed just for a very minor imperceptible gain!

Maybe bear in mind Google and Yahoo both want everyone to write stylesheets with classes alone, this would increase CSS file sizes and introduce classisits and divitis, is not likely to speed up or slow down sites either way BUT I think it would make stylesheets a lot easier for them to parse as they can't read specificity/inheritance very well, ... if I was really paranoid I might just ay they even might be capable of "bending" the truth if it suited their purposes slightly better ;)

Alternative Future




msg:4039475
 2:44 pm on Dec 8, 2009 (gmt 0)

Ok thanks SuzyUK

Maybe I am being over paranoid as the speed check tool is saying that my site css is only 62% - and I was trying to get everything up too 100% or at least very close to it :)
I agree with all your points about SE's dictating to use how we should do things when they are the ones that are one step behind in meeting with the standards ;)

I shall try out what vincevincevince said anyway as there is only a couple of them - just to see if there is any difference which i donít think there will be...

Thanks

-Gs

swa66




msg:4039776
 12:23 am on Dec 9, 2009 (gmt 0)

That part of the Google speed stuff is IMHO promoting "classitis", a thing we try to discourage out here as it's considered bad code.

Moreover adding a class everywhere is going to bloat your html.

I can't get it that they promote gzip compression and then worry about looking up a descender selector in the DOM.

Esp. for static pages I strongly doubt there's anything even noticeable.

Fotiman




msg:4040105
 3:24 pm on Dec 9, 2009 (gmt 0)

@SuzyUK and @swa66, are you sure you're not reading more into it than is actually being said? When I view this message:


ul.tabs li a
Tag key with 2 descendant selectors and Class overly qualified with tag

I interpret that to mean exactly what it says... a tag key "ul" with 2 descendant selectors "li a" and Class ".tabs" overly qualified with tag "ul". In other words, if you're going for smallest code possible, then this would suffice:

.tabs a

Had the code been this instead:

ul li a

I would expect it to say "Tag key with 2 decendants selectors". That is, it's not saying "they would like us to add class names to every single element and use them in our CSS instead of the descendant (or any other type of existing) selectors." It's simply saying that having both the element tag AND the classname is overkill, and that having multiple descendants may be overkill as well. In no way do I read into it that they want classes on every element.

SuzyUK




msg:4040211
 6:11 pm on Dec 9, 2009 (gmt 0)

@Fotiman, No ;) but I get your point

The opening post illustrates the perception of these speed "warnings" precisely, and while someone may know how to interpret them and even take the decision to treat them as no more than alerts, unfortunately not all will and that is going to confuse people to the end that they will, or might, revert to classes just to see, or rather not see any warnings ;)

They might come here and they might go the G & Y help pages to conclude that what we've been saying here on the forums is trash ;) - then they just might add divs and classes all over the place in order to NOT see warnings and think their site is going to be faster too.. ?

I think you'll find that even if you remove the overly qualified bit, yes you're right it won't make a difference to the "warning" except to remove that bit, however

if you're going for smallest code possible, then this would suffice:

.tabs a

is very dangerous, sweeping advice to give/take based on such warnings, it could break pages.

Granted on simple sheets it's not bad advice but.. if you or the person before you, or the team you're working with has reused the class name in a different part of the site, OR there is inheritance involved in the lesser selector - guess what!

Reusing code and class names is considered very efficient CSS! and inheritance or the CASCADE is CSS, I know it will be simplified for the masses and the WYSIWYGS but honestly (at least I believe this 100%) - the information that these "warnings" are giving is contradictory to efficient CSS and they are even calling it inefficient :o

..to your advice, It's probably still fine in most cases, but it will not remove the "alert", it might change it, but it will still give one, and we know how long it took people to get over the W3C validator "warnings" that were not really warnings ;)

however, if you took from this warning, that you need to shorten your selector, let me just say that could break your site!

ie.
.bar a {
color: #fff;
background: #f00;
}

.tab a {
float: left;
width: 100px;
color: #000;
}

<div class="bar">
<div class="foo">
<div class="tab">
<p>This would be some text with a <a href="#">link in it</a></p>
</div>

<ul class="tab">
<li><a href="#">link in list</a></li>
</ul>

</div>
</div>

an exaggerated example, as in there's too many wrappers but just pretend theres loads of other code/content in those divs/containers

in this case the sensible thing to do, rather than go add/change classes in the HTML, is either qualify the list with the element ul.tab or add in a descendant element .tab li a

That's called using CSS Specificity, and it will also not overrule the inherited background color, inheritance is the Cascade!

It should not be about making the CSS a small as possible, the inefficiency referred to by Page Speed and Steve Souders is in fact nothing to do with the amount of descendant selectors or whether the selector is qualified with an element (actually qualifying with the element would probably be preferable according to their theory) - it is about how many "lookbacks" a browser has to do while parsing in order to match the selectors.

Their logic is such that if you were to give every element a class (or add a wrapper with a class) you reduce the amount of lookback time through the DOM (sorry I don't know the right word here!) - BUT that's where Souders research is very interesting.. that lookback time, even for hundreds of nests and elements is probably NOT registerable on most sites, so the "warnings" are fluff unless the warnings affect elements which number in the thousands.

My logic tells me that if you add classes to every element, yes you'll lose the warnings, and possibly increase the tool's page "score" - but you'll add to your HTML and very likely the CSS too and you'll make it much easier for the SE's, and ever so slightly easier for the browsers to parse the CSS - you'll actually be stopping using EFFICIENT CSS :) and you will not get much if any actual SPEED gain - which is what the tool is for no?

(sorry if that sounded like it rant.. it is!)

In no way do I read into it that they want classes on every element.

No you might not, but we've seen it coming for a while.. YUI code anyone? - this is just the other side of the coin now that it's actually in a more widely used tool

Fotiman




msg:4040252
 7:34 pm on Dec 9, 2009 (gmt 0)


The opening post illustrates the perception of these speed "warnings" precisely, and while someone may know how to interpret them and even take the decision to treat them as no more than alerts, unfortunately not all will and that is going to confuse people to the end that they will, or might, revert to classes just to see, or rather not see any warnings


...then they just might add divs and classes all over the place in order to NOT see warnings...

I understand what you're saying. However, reading the actual warning message, I am in no way urged to add classes to anything. So I don't think that's a valid argument to make. More on this later(1).


however

if you're going for smallest code possible, then this would suffice:
.tabs a

is very dangerous, sweeping advice to give/take based on such warnings, it could break pages.

Again, I see what you're saying. Yes, changing your CSS in such a way could break pages if you are reusing class names to apply differently to different elements, and/or by reducing the specificity such that a rule that had lower specificity now has greater specificity. This is a new tool, and like many new tools it may need some tweaking and clarification as far as what the messages mean. There was alot of confusion around HTML and CSS validator messages, which have improved with time, and I expect these messages will improve with time as well. But my guess is that Google assumes that if you're using this tool, then you are a CSS expert and know exactly what you're doing (and yes, that is a poor assumption).

the information that these "warnings" are giving is contradictory to efficient CSS and they are even calling it inefficient

See, I don't entirely agree. I think it really depends on your site. In certain cases, it certainly will make more sense to include longer specificity chains. However, often times I see developers do things like:
div.foo ul li a
When div.foo will never contain any links outside of the lists, and .foo will only ever apply to a div (so it could be shortened to .foo a). It all depends on your content, and what practices you and/or your organization are exercising. But I don't think it's fair to say that ALL of those warnings are "contradictory to efficient CSS" (More on that later(2)). Efficient CSS, in my opinion, means using the least amount of specificity required, allowing the cascade to work (don't redundantly define styles that are inherited), and avoiding code bloat (in both the HTML and the CSS)... it's up to the developer to know whether or not changing the CSS specificity will impact other areas of the site.

As for what Page Speed considers inefficient:
Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.

[code.google.com...]

Note, I hadn't read this page before my previous post. I had assumed that the "Tag key" was the "ul", but in fact it is the rightmost "a". I now understand exactly where you are coming from. In fact, you're right, they do explicity say:

Make your rules as specific as possible.
Prefer class and ID selectors over tag selectors.

(1) My initial misunderstanding of part of what the warning message was saying points out that they need better warning messages. Also, it seems that they ARE in fact wanting you to add classes and/or ID selectors to more elements. I understand their argument that it is more efficient if the rightmost element of your CSS selector (the "tag key") is an ID or class, as it will mean less traversal up the DOM tree when matching selectors. But you are certainly correct! Adding classes and IDs to every element is NOT efficient from a markup perspective, and I think they need to do a better job explaining this, and validating it with actual performance numbers. I will say, though, that it makes sense to the extent that if you have a tag name that already has a class or id value, then you would be better to use that id or classname as the rightmost selector of your style rule (but I wouldn't go adding a bunch of IDs and classes for that purpose alone).

(2) The suggestions to remove the redundant qualifiers is, I think, a good suggestion (and the documentation even says "Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)." (Emphasis added is mine). I think armed with this knowlege, developers might create NEW sites that use more efficient CSS. Modifying existing sites can be tricky, and as I mentioned above, it's up to the developer to know what sort of impact a change like that will have.

So I'm changing my tune slightly. I think some of what those warning messages say may be correct, but I now understand why you thought it was suggesting classes on every element. :)

SuzyUK




msg:4040314
 9:40 pm on Dec 9, 2009 (gmt 0)

However, reading the actual warning message, I am in no way urged to add classes to anything. So I don't think that's a valid argument to make.

agreed you are right, but on the other hand if you want to know how to make those 'warnings' disappear, I not only just told you how, I gave the other side of the argument.... therefore the argument is valid, just a bit before it's time perhaps.. my apologies ;)

I do now feel I'm preaching to the converted, when talking to you - but hopefully some others are reading that will be able to make their own decisions based on the arguments from both sides, or indeed inject more views!

Thank you for finding the quote from Google's rules
Make your rules as specific as possible.
Prefer class and ID selectors over tag selectors.

that is the one among many that tied it all together, and made me realise that OXYMORONS (i.e FUD) was going on, their idea of specific rules and CSS Specific Rules are two completely different things, that is my personal frustration

TRAVERSAL - is the word thanks!

they need better warning messages.

No they need to butt out until they understand, now's not the time for any SE to tell us how to write code

SuzyUK




msg:4040319
 10:05 pm on Dec 9, 2009 (gmt 0)

when a class is only used for one tag, which is
a good design practice anyway)

OhMiGosh just realised what that quote was saying - you are kidding aren't you? Have I really wasted 5+ years trying to explain the difference between an ID and a class, if you, or anyone else thinks that Good Deisgn practice is to only use a class once & per tag at that... I've failed :(

Fotiman




msg:4040324
 10:20 pm on Dec 9, 2009 (gmt 0)

Note, that quote was from Google, not from me. :)
Also, it says one tag, which I take to mean as "div" or "span", but not both "div" and "span" (I'm only using div and span as examples... substitute any tags). In other words, they are saying this would be good:


<div class="car">
<div class="make">Ford</div>
...
</div>
<div class="car">
<div class="make">Toyota</div>
...
</div>

But this would not:


<div class="car">...</div>
<span class="car">...</span>

At least, that's how I interpret what they are saying.

SuzyUK




msg:4041740
 12:27 am on Dec 12, 2009 (gmt 0)

I know it was from G, :) sorry tongue was firmly in cheek..

You interpret it probably the way it's meant, and that's exactly why I think divitis will be encouraged again - as you can tell I don't agree with a class per 'tag' (I presume they mean element?) being "good design practice" either.

for instance say you have a sidebar containing blocks of content, divs, adverts, lists or whatever and you want them all to have uniform padding you can have a "pad" class which, after reset CSS is used (another common practice now) can be applied to any tag/element in that sidebar no matter which and if it's ID'd properly (i.e in the sidebar) then you've just the same code over as well as reusing it for the other sidebar as long as it's got a different ID

In other words it the re usability of CSS code, irregardless of the HTML "tag"

e.g.why not use an ID with descendants

if you were to use an h3 and h4 as your make and model, wouldn't that be more correct and avoid the divs and classes altogether? I know you said divs were an example, but I've rarely seen a page that couldn't be targeted as long as the ID's were correct, in order to add class names in the right place, between your code and mine - you MUST have an idea of the design/presentation before the programming is done

<div id="cars">
<h3>Ford</h3>
<h4>Escort</h4>

<h3>Toyota</h3>
<h4>Yaris</h4>
</div>

<div id="ipods">
<h3>Nano</h3>
<h4>8GB</h4>
<p>now you want to put some text in here</p>

<h3>Touch</h3>
<h4>32GB</h4>
</div>

because the code is written logically no extra divs or classes are needed, however using #cars h3 or #ipods h4 will earn a "warning" -

So which is the better design practice?

the above or adding classnames to the h3, h4 and p

it's interesting for sure, I bet we see the latter more and more, and yes the good people will at least use the right elements but others are more likely to wrap with divs :(

Fotiman




msg:4041760
 1:38 am on Dec 12, 2009 (gmt 0)


you can have a "pad" class which

Ah, see, now this I strongly disagree with. Using classes that describe presentation vs. classes that describe the content. Yes, you COULD do this, but it means that changes to your presentation might require to you to modify both your CSS AND your HTML, which defeats some of the advantages of CSS. I avoid classes like "pad", "red", "left", etc., as those are definitely NOT good practices. I think that's slightly off topic, though.

Yes, I agree with you, that using semantic elements as in your example demonstrate better design, despite any warnings you might get from the Google tool.

swa66




msg:4041916
 1:06 pm on Dec 12, 2009 (gmt 0)

I worry a lot over this.

This tool is going to end up in the hands of the not so experienced CSS coders, even of people who've never touched CSS themselves, but are going to use it to audit the CSS on quality properties. Even CSS coders already show a tendency to go overboard on adding classes, ids, divs, spans etc.
The tool is going to get more exposure as Google (threatens to) gives more weight to speed in SERPs.

There is a big risk people will use it an authoritative source, like a religious book to the faithful, and not question the validity of the advise anymore.

In which case we'll be left screaming in the desert trying to point the simpler, easier, even outright better path out but not having people willing to see it anymore in their blind faith.

SuzyUK




msg:4041984
 3:53 pm on Dec 12, 2009 (gmt 0)

OK call the class "extra" then ;)

You would not have to change the HTML, simply get the class name to do the work from the CSS using the specificity of its parent ID and/or use the element it is attached to - i.e. qualify it! - that being the point which started this ;)

for clarity it wouldn't matter what the class name was it could be used for more than padding.. sorry possibly bad example name, though I use it because I feel that adding fluff of any kind be it color, size, background, padding, margins is "padding" the presentation ;)

anway, I don't think I was exaggerating - the point is that the G Tool is sending misleading messages to "Joe Blogger" type users that their CSS is inefficient, when in fact it's probably very efficient, it's just not what the SE's would like to see!

There is a big risk people will use it an authoritative source, like a religious book to the faithful, and not question the validity of the advise anymore.

That sums it up for me too, which brings me back to, Why people would be looking to SE's (Google and Yahoo!) for advice on CSS coding when it is simply not proven that a particular coding style has any impact on Page Speed at all.

Each to their own, but I will still promote W3C practices as "best practices" as that is the authoritative source, this includes using the Cascade and Specificity to do what they were designed to do :)

Fotiman




msg:4042027
 6:23 pm on Dec 12, 2009 (gmt 0)

Maybe I misunderstood what you were saying. I thought that you were saying you would have a generic "pad" class that could be applied all over the place... as in, within your HTML you would say "I want this element to have this padding, and I want this other totally unrelated element to also have that padding, so I'll just apply the same 'pad' class to both". But perhaps that's not what you were suggesting.

swa66




msg:4042037
 6:56 pm on Dec 12, 2009 (gmt 0)

Let's say you make a website containing manuals for electric devices.
You know the type of manual for consumers: legal implications make you plaster warnings all over the manual.
Some of these warnings might have just some text, some might be multiple paragraphs. Some might have a title, some might not need a title.

So why not have a "warning" class that can be used on a div, on a title, on a paragraph, basically on any normal element and that it acts properly ?

You can easily give the html authors some guidance to use things like:

<div class="warning">
<h4>HOT</h4>
<p>This widget gets very hot during normal operation.</p>
<p>Do not touch it.</p>
</div>


<h3 class="warning">Unplug the widget before cleaning it.</h3>


<p class="warning">Do not use this widget if the power cord
appears damaged. Proceed to bring it to an authorized widget
service center.</p>


<div class="warning">
<p>Legalese nobody will read.</p>
<p>More legalese nobody will read.</p>
<p>Even more legalese nobody will read.</p>
</div>

Easy for the authors, and easy enough to do in CSS as long as you don't get uptight reactions over using child combinators to counter e.g. normal settings on a h3 and h4 or even a p inside the warning containers.

Note that I'm not saying to use overly specific selectors like "body #wrapper #header #navigationmenu ul li.selected": I'd agree they are mostly always going to be a quite bad idea, but e.g. ".menu li" really isn't something to start whining about!

SuzyUK




msg:4042304
 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]

JAB Creations




msg:4043583
 6:41 pm on Dec 15, 2009 (gmt 0)

With proper CSS 1.0 you do actually need to use child divisible elements to use margin to emulate the parent's "padding". As far as layout is concerned the parent-most divisible elements always dictate the width percentage (or on poorly designed pages or dictated by those who shouldn't be dictating such things the pixel based width). Those parent elements should never use anything other then width and their child elements should use margin to emulate their parent's padding. This is very important with CSS 1.0 and it works all the way back to IE 4 and Opera 4.

I agree that there are a lot of ridiculous warnings with CSS. My personal gripe is with the W3C CSS validator. In example every element except the body/html inherits the background-color value of transparent. When you assign a color property/value to a selector though not a background-color the W3C CSS validator will spazz out about this with a warning...and my CSS tends to generate dozens upon dozens of these obnoxious warnings. I've gone so far as to complain about this in my blog.

I use element, class, and id based selectors and often mix them all up. It's not invalid and there are plenty of advantages to doing so.

If you want to write better code pay attention to each rendering engine's leading browser's error console. The list...

Gecko/Firefox
KHTML/Konqueror
Presto/Opera
Trident/Internet Explorer
WebKit/Safari

First concentrate on removing any and all errors. Serve your XHTML as application/xhtml+xml and fix those first...they're more important then CSS errors because broken CSS will break CSS code that isn't broken. Then fix your CSS errors that appear in the consoles. Once you're that far conquer (strict) warnings (CSS and JavaScript) present in the consoles.

Beyond that learning to make your pages WAI AAA compliant is the one of the best steps to improving your code. By reaching that level of standards you'll breeze through all of the legitimate validator concerns. :)

- John

swa66




msg:4043669
 9:16 pm on Dec 15, 2009 (gmt 0)

We're long beyond CSS 1.0. Currently CSS3 modules are slowly entering CR status and that means widespread usage is recommended (and needed to convince the slackers among the browser makers to clean up their act).

Letting yourself be limited with CSS1.0 will make for a very poor set of possibilities.

The CSS validator at W3.org indeed likes to give waring about colors. If you know what you're doing, you can ignore them. They are NOT errors, just warnings.

SuzyUK




msg:4043690
 9:37 pm on Dec 15, 2009 (gmt 0)

They are NOT errors, just warnings.

That's exactly it, isn't it? These PageSpeed "warnings" are just the same - to the peeps who are not interested in the W3C "standards" warnings but do apparently pay attention to SE tools warnings :o please do listen to sage advice like Swa's

the W3C CSS validator will spazz out about this with a warning..

perhaps that's about the best explanation I can give too :) except replace "W3C CSS Validator" with the words "Page Speed"

I agree that there are a lot of ridiculous warnings with CSS.

we agreed that a long time ago JAB, it's just that we might have a new phase/different "validator" going on here, so which would you use - the descendant/child selectors or the extra classes..

and just to remind people (with Tin Hat on) do you think the SE's would be able to parse/understand the stylesheet better with or without specificity and inheritance?

JAB Creations




msg:4043747
 11:17 pm on Dec 15, 2009 (gmt 0)

Swa, you can't do CSS 2 until you understand CSS 1.0 just like you can't do CSS 3 until you understand CSS 2.1. I see an awful lot of nightmare excuses for CSS and a lot of positioning when positioning is not needed. People don't understand the fundamentals and so it has an echoing effect in to the higher levels of CSS. That ends up making a big mess because browser vendors end up getting a flood of bogus "bugs" or exceptionally strange approaches to something as simple as a sidebar when people don't understand how to use CSS which is why I made the point about child margins as parent padding.

Where is this Google "speed check" any way? Absolutely nothing came up on Google.

My work has evolved to approach CSS in the following manner...

*
element selectors
#ID page section (content, head, foot, side)

With the id selectors I overwrite the original element selectors where needed.

Additionally I use XHTML, not HTML. Honestly HTML5 has some massive issues that keep me from ever considering adopting it. While the context of what each divisible element on my page can't be determined by the element itself (the one thing I do find agreeable about HTML5) as they are generic for block-level elements important parts of each page on my site use fundamental values for the id attribute.

In example the major id's in their top to bottom appearance...

#body
#body #content
#body #side
#head
#head #menu

Most people don't have as much time as I have to master their understanding of things...least of all software developers who would suggest these "warnings" trying to dictate as a software developer how a web designer should do their work. I've had plenty of criticisms of software though I honestly can say I've never told a single software developer that they had to avoid using certain parts of a language (you may not use loops!) or that they can not construct classes in OOP capable languages with a devastatingly limited naming scheme.

...and 20ms? Really...honestly...I'm working on the 29th version of my site and as much as I like pursuing things to the extent of perfection I also like the victory of releasing it. Plus I still haven't achieved everything I want...so with all the work I've done and the bit of work left...really I have to weigh investment against return and 20ms against thousands of class selectors? It's an obvious loss due to the gained bloat in the sheer amount of code and you'll only end up negating the measly 20ms you're working towards in the first place even if you compress your CSS. Like anything work-related you should always consider investment versus return otherwise if you please everyone you'll end up working for free! EEP!

- John

swa66




msg:4043760
 11:36 pm on Dec 15, 2009 (gmt 0)

Swa, you can't do CSS 2 until you understand CSS 1.0 just like you can't do CSS 3 until you understand CSS 2.1.

That's not true in my opinion: CSS3 is a standard on it's own, be it modular and -depending on the module- in a varied state of being unfinished at this point. It does not need CSS2.1, 2 or 1 to be understood at all.

You simply cannot expect somebody starting now with CSS to start to learn CSS1 first. They'll learn CSS3 (or 4 or later) as a first step.

Nightmare CSS out there: I'll agree to that, but when looking in on it the cause is not lack of CSS knowledge in most cases. Most horrible CSS I come across is legacy IE inspired.

Google page speed:
[code.google.com...]
(but that's NOT a recommendation when it comes to CSS!)

JAB Creations




msg:4043859
 2:10 am on Dec 16, 2009 (gmt 0)

It does not need CSS2.1, 2 or 1 to be understood at all.

Swa, create a tableless two column page with content (80% width) and a sidebar (20% width) without using the float property.

Firefox self-imploded and I lost 20 minutes of ranking on the warnings (some of the others besides initially mentioned in this thread)...gah.

- John

moltar




msg:4044114
 2:15 pm on Dec 16, 2009 (gmt 0)

Not sure if has been mentioned, cannot read the whole thread. But what you need to keep in mind that you must contain the <a> tag within the <li> tag, you can't put it directly into <ul> tag. So shortening it to: "ul a" is fine, because there are no other alternatives.

JAB Creations




msg:4044300
 6:44 pm on Dec 16, 2009 (gmt 0)

Swa, I think my concern that conflicts with your statement was actually that I feel people don't have a good structure for learning things such as CSS and other web-oriented languages. It's good that people can just jump in though my concern is that when people don't understand the fundamentals of how a language started, at least in the context of CSS, then they will attempt to use newer properties and selectors to achieve simpler goals that they should be using older properties and selectors for. I think that's probably better way for me to word it then my "challenge". :o

Trying to get back on topic I'll go over some of the warnings I encountered and why I feel they're invalid concerns.

Use efficient CSS selectors
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.

* form fieldset label:hover

This is an invalid warning because nothing is more annoying then not knowing what label is associated with what field. In fact I even like WebKit's take that when you over over a label element it actually trigger's the hover psuedo-element of the input element it's associated with presuming of course that the label's for attribute's value is the same as the input's id attribute's value. These are visual ques and help aid the user. Aiding the user is more important then saving 0.04ms or whatever amount of time is "wasted".

Additionally for WAI AAA compliance I am very strict about how I construct my CSS selectors. You have to put field elements inside a field just like you can't put an block-level element inside of an inline element. There are so many warnings that I can't remember where it was located that it was also another false warning that can safely be ignored.

Remove unused CSS
This is perhaps one of the most misleading warnings. It's implementation is too simple and therefor should have been kept out of the extension until it was constructed to the extent of the complexity it should have been implemented as. I don't make a style sheet for each page, that's a total waste! Why download a whole new CSS file per page? So it's only natural that each page will lack some traits of other pages...you're not going to make a single page website? Aren't the SEO forums screaming about providing as much possible good content? Aren't the search engines trying to find good sites and determine if there is junk? So why then slap good sites in the face that have more then one page and thus CSS for more then one page?

This is no different then Vista's (and to a lesser extent 7's) memory management where the OS treats the RAM like a RAM-drive (RAM drives are battery-backed up "hard drives" for super-enthusiasts and tend to have about 8GB+ for insanely fast OS and application launching). It simply presumes you want to open anything and everything thus dumping it in to the memory. Proper implementation would be to determine when user does A they are likely to do B so load things associated with B. The hard drive is the slowest part of the computer so why slow that down for unnecessary stuff that has no justification that it will ever be loaded in the first place?

Implementation is key and if this feature were you be implemented correctly I would have dictated that it crawl through the site (let's say limited to a domain/path of localhost/projects/happy_fish) and then after looking at all the pages determined what went unused...now that would be insanely useful! Are you listening Google?

Parallelize downloads across hostnames
I can sort of understand the concern here because there is an HTTP limit especially with Windows XP Service Pack 2 where simultaneous active TCP-IP connections were limited to a maximum of ten to combat spyware and zombie computers sending out hordes of spam. However this restriction has been eased the last time I read on the subject plus it doesn't make sense for sites for smaller businesses and individuals to spend money on a second domain and spend time ripping files from their main project and sticking them somewhere else associated with a different domain and all the headaches associated with that. Honestly I think this issue is negated by caching headers. If you set the right headers for file types to not expire the browser won't even make an HTTP request for them in the first place until the date of the expiration headers so you won't even have to wait for the server to return HTTP 304. I think that is the direction Google should have suggested with this warning.

Defer loading of JavaScript
"Profile Deferrable JavaScript" is checked in the Options menu.

I couldn't find this option so if someone would be kind enough to point it out I'd appreciate it! :-)

- John

Fotiman




msg:4044330
 7:20 pm on Dec 16, 2009 (gmt 0)


Defer loading of JavaScript

"Profile Deferrable JavaScript" is checked in the Options menu.

I couldn't find this option so if someone would be kind enough to point it out I'd appreciate it! :-)

When you open Firebug, click on the little downward pointing arrow to the right of the text inside the "Page Speed" tab. The first item in the menu is "Profile Deferrable JavaScript (slow)"

JS_Harris




msg:4045810
 9:38 pm on Dec 18, 2009 (gmt 0)

Being a perfectionist is certainly a good goal to have as a webmaster, good habits are a blessing.

About that service though, it's telling me that I need to reduce the number of domains called per page load. Ironically the only domains being called are mine, google analytics and google adsense on this particular site.

Google suggesting that I remove Google, funny stuff.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved