SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: More Speed

  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    More Speed

    Sitepoint Memebers,
    Does the id selector function do anything that can't be done with a class selector.

    I have a bunch of div#s in my CSS:

    div#content{position:relative;float:left;wid.............}
    div#colmid{float:left;width:200%;marg ..............}
    div#colleft{float:left;width:100%;margin-left:-50%;..........}
    div#col1wrap{float:left;width:50%;position:relative;right:160px}
    div#col1{left:200%;overflow:hidden;position:relative;margin:0 170px}
    div#col2{right:10px}
    div#col3{margin-right:30px;left:50%}

    and I wonder if there's a way to speed them up like Sitepoint explained to me about class selectors.

    I rememebr Noonnope saying:
    For div.firstimg{...} the browser must:
    - identify which elements have the class="firstimg" values
    - then filter only the div tags from its findings

    With firstimg{...} the browser only has to identify which elements have the class="firstimg" values (1 step).

    So I removed all the selectors and it worked great.

    So can't I just change
    css: div#content{position:relative;float:left;wid.............}
    htmldiv id="content">
    to
    .content{position:relative;float:left;wid.............}
    htmldiv class="content">

    Thanks,

    Chris

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the selector is just to select, so if cou change all your id into class atributtes AND do that in the CSS

    however since you know that every .col1 is a DIV , there is no need to add the DIV part and just say .col1{...}

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Gar onn,
    What if I just remove the Divs?

    #content{position:relative;float:left;wid.............}
    #colmid{float:left;width:200%;marg ..............}
    #colleft{float:left;width:100%;margin-left:-50%;..........}
    #col1wrap{float:left;width:50%;position:relative;right:160px}
    #col1{left:200%;overflow:hidden;position:relative;margin:0 170px}
    #col2{right:10px}
    #col3{margin-right:30px;left:50%}


    and keep the html the same e.g. <div id="content"> <div id="colmid">

    I just don't see how id=".." does something that class="...." can't.

    Thanks,

    Chris

  4. #4
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just don't see how id=".." does something that class="...." can't.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure what you are asking there but you can use either class or id and the speed should be the same as css works from right to left and the match is made instantly.

    .test or #test is pretty much equivalent except that ids carry more weight of course and must be unique whereas classes carry less weight and can be used on multiple elements. A class can do everything that an id can do but an id cannot do everything a class can do as ids are unique and can only be used once. If you wanted you could just use classes for the whole page with no ill effect but you would be hard pushed to user ids for everything because they are not re-usable.

    I use ids for main structural elements that are unique in the page (e.g. #header,#footer, #nav, #main, #sidebar); for most everything else use classes unless you know the element is completely unique.

  6. #6
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    That's what I wondered. Classes are just as unique if you use a class only one time. Have any idea why ids were developed?

    Thanks,

    Chris

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Paul,
    That's what I wondered. Classes are just as unique if you use a class only one time. Have any idea why ids were developed?

    Thanks,

    Chris
    You could just use classes but it makes things more awkward if using javascript. Id's address an element uniquely and therefore you can find an element easily if using javascript. On the other hand finding a specific element by class name is more complicated because there could be many.

    id (HTML attribute)
    ID Selector (CSS selector)
    Class Selector (CSS selector)

    They both have their uses in the right place

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,060
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Classes are just as unique if you use a class only one time.
    That's true, but classes may be unique, ids must be unique.
    For example for stuff like the header, footer, main menu, etc I would use an id, since those are elements it doesn't make sense to have multiple of them.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


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
  •