SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Common CSS Instructions - Which Is Faster?

    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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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...

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stevie meant you're inconsistent with the class name:

    Code:
    CSS
    div.firstimg
    
    HTML
    <div class="someimg"

    If you ask what's the fastest, then
    Code:
    .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:

    Code:
    .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. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chris77 View Post
    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).
    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
    Code:
    HTML
    <div class="someclass"...
    
    <h1 class="someotherclass"...
    
    <span class="someothercompleteyldifferentclass"...

    and this means you can lose the tag prefix, and have just that:
    Code:
    CSS
    .someclass{...}
    
    .someotherclass{...}
    
    .someothercompleteyldifferentclass{...}



    Quote Originally Posted by Chris77 View Post
    So when would it be wise to use p.classname instead of .classname ?
    Never.

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Chris77 View Post
    So when would it be wise to use p.classname instead of .classname?
    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. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •