Common CSS Instructions - Which Is Faster?

HTML & CSS
1

Sitepoint Members,

Which would be faster for loading a webpage:

CSS: div.firstimg{…presentation instruction here won’t be used anywhere else on the page …}

HTML: <div class=“someimg” title=“…” >…</a>

or

CSS: .firstimg{…presentation instruction here won’t be used anywhere else on the page…}

HTML: <div class=“someimg” title=“…” >…</a>

Thanks,

Chris

2

If it makes any difference at all, you’d need an atomic clock to measure it. Whether you include the element type within the CSS declaration will not make any noticeable difference at all to the rendering speed of the page.

And in an ideal world, you’ll be using the same class name in both the HTML and CSS. Otherwise anyone not running the Psychic Developer add-on won’t see the CSS applied… :cool:

3

Stevie D,
I should have included it my question. I do have a Psychic Developer add-on on my site. )

So this leads me to a burning question I’ve had about css for a long time:

Why would an experienced CSS developer use div.firstimg instead of having everything in the form of .firstimg?

What is the advantage of div.firstimg over .firstimg?

Thanks Steve,

Chris

4

Stevie meant you’re inconsistent with the class name:


CSS
div.[COLOR="Red"]firstimg[/COLOR]

HTML
<div class="[COLOR="Red"]someimg[/COLOR]"

If you ask what’s the fastest, then


.firstimg {...}

is fastest.

In order to apply CSS style, a CSS rule (the selector part) is evaluated by the browser, from right to left, in order to identify the elements in the created DOM, based on the HTML markup.

For div.firstimg{…}, the browser must:

  • first identify which elements have the class=“firstimg” values
  • then filter only the div tags from its findings

Obviously, .firstimg{…} it’s a one step:

  • identify which elements have the class=“firstimg” values

We see from that, as a bad practice, the use of the same class name for different tags: div, h1, which would probably lead to the necessity of the following CSS rules, to differentiate between the differences in style for them:


.someclass{...}

div.someclass{...}

h1.someclass{...}

which is the only reason (aside from CSS readability) to use div.someclass over simply .someclass.

However, only following the rules for selector performance will not make for a faster web page. There are many other factors at play.

5

Yeah I meant for them all to have the same class names.

So it’s better to use .classname in css and not

div.someclass{…}

h1.someclass{…}

span.classname{…}

(but might be a little more difficult for readability of a css file).

So when would it be wise to use p.classname instead of .classname ?

Thanks,

Chris

6

If you are absolutely certain that particular “set of instructions” will to appear anywhere else… an ID usually serves best.

If you want ,have a set of instructions that are used else where but need to be slightly tweaked, or need to apply to a specific tag down the cascade tag.class is handy.

ALSO , lest not forget specificity!

tag.class is MORE specific than .class, so if you need to override something tag.class is this the way to do it.

(so you can see what am saying)

.red { color:red; padding:10px}
div.ovrd {color: green}

<div class=“red”>I am red with 10px padding </div>
<div class=“red ovrd”>I am GREEN with 10px padding </div>

hope that helps put some perceptive on the usefulness of the various techniques

7

No, it’s not about that, since you can’t cram in one CSS rule all the declarations for all the div, h1, span with same class and get away with it, for many reasons, including the fact that div may have different styling from the h1, and span can demand some other styling that’s not fitted for any div or h1, and that you normally would put in .class{} the common declarations, and in div.class{} those specific for div, in h1.class{} those specific for h1 and in span.class{} those specific for span, meaning you are forced to have all four: .class{}, div.class{}, h1.class{}, span.class{}, thus making your question about choosing between (.class{}) and (div.class{}, h1.class{}, span.class{}) futile.

It’s better to not use the same class name for different classes of tags. There is no reason to do that.

This is what you should do


HTML
<div class="[COLOR="Red"]someclass[/COLOR]"...

<h1 class="[COLOR="SeaGreen"]someotherclass[/COLOR]"...

<span class="[COLOR="RoyalBlue"]someothercompleteyldifferentclass[/COLOR]"...

and this means you can lose the tag prefix, and have just that:


CSS
[COLOR="Red"].someclass[/COLOR]{...}

[COLOR="SeaGreen"].someotherclass[/COLOR]{...}

[COLOR="RoyalBlue"].someothercompleteyldifferentclass[/COLOR]{...}

Never.

8

When you need to.

That might sound unhelpful or trite, but what it means is that if you need to include the element name to ensure the right specificity. For example, you might have class=“shout” applied to a variety of elements, with the same properties all the time, but with a slight variation when it’s on a <p> compared to other elements.

9

Great because that’s what I did. changed div.header to .header, changed div.post to .post.

BTW the divs work fine now. I must have fixed something a short while back that also fixed the div problem, but I really did have the problem, otherwise I would have never bothered with h, or span, or substitutes.

Thanks for the help,

Chris