SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IDs vs Classes in html/css

    Hi,

    I started working with a local web design company and they sent us the first template of the design. The design is very nice and everyone in the company agrees that it's a lot better than what we have currently.

    But one of the things I noticed is that they reuse (a lot) of the ids on the same page (opposed to have them as classes). When I asked them about this, they said they found that ids were more consistent when viewed in browsers and that many modern browsers won't care about multiple uses of ids and will render them fine. If javascript issue comes up, they will just create unique ids for them. And in the browsers I looked in (IE6, IE7, Safari, FireFox 1.5 and FireFox 2.0) they do show up fine.

    Is this really an issue that I should pursue to have them fix it? It does seem a bit silly to complain if it does work fine for everyone.

    Thanks.

    -Syld

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's invalid HTML if you use multiple id's within a page so I'd personally get them to fix it if I was the client. Run the page through http://validator.w3.org and it'll highlight any problems with the code.

    Using invalid code may work now and whilst this is a minor issue, it is invalid and has no guarantee of being future proof. Table's do work for layout but that doesn't mean they're right what about IE8, Firefox 3 etc?

    The line that they've given you about id's being more consistent is basically bull and I suspect has been used to get you off their case.

  3. #3
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found that using multiple ids can throw up a load of rendering issues... there was one on here the other day misbehaving in Opera and the cause was reusing ids.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  4. #4
    SitePoint Wizard Dean C's Avatar
    Join Date
    Mar 2003
    Location
    England, UK
    Posts
    2,906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple rule:

    - Use IDs for one-off items on the page
    - Use classes for repeatable styling

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Any validator will bark at you loud and very clear if you re-use an ID, in normal page building ID or class use makes not much difference, (target css, and some People seem to get lost on there own pages and need Tags in front of ID's ) the lowest power CSS is the most flexible, ID is King but class rules, efficient websites need classes, with ID only the number of code is higher

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    When I asked them about this, they said they found that ids were more consistent when viewed in browsers
    lol - what a load of rubbish

    Id's have nothing to do with how a browser will display the css as the id only identifies the element. Whether or not a browser displays the css correctly on that element will have nothing to do with whether it was put there by a class or via an id.

    When to use an ID or a class is really another question and one that has been answered many times in the forums.

  7. #7
    SitePoint Zealot twistie's Avatar
    Join Date
    May 2007
    Location
    Tonwsville, Australia
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would get them to change it immediately. Not only does multiple elements with a single ID throw some browsers into quirks mode it is a rather large violation of W3C standards and will mean the page fails validation. Classes are meant to be used when there are multiple elements with the same CSS properties in a single page where as IDs can only be used for elements that appear only once on a page. As Paul O'B said IDs have nothing to do with the display of CSS. All implementations of CSS in browsers have the ability to recognise elements that are identified by either class or ID. There are none, that I am aware of that will recognise ID but not class, even IE5 (and thats telling you something).
    "When you say 'I wrote a program that crashed Windows',
    people just stare at you blankly and say 'Hey, I got those
    with the system, for free'." (L. Torvalds)

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Trying to use getElementById in JavaScript when there are multiple elements with the same id in the page will return one of - the first element, the last element or nothing at all - depending on how the browser has been written to cope with that error. Similarly when applying style info to the id the browser may only apply the style to the first, last, all, or none of the elements depending on how the browser handles the error.

    For consistent cross browser results you must not use an id more than once in a page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by twistie View Post
    multiple elements with a single ID throw some browsers into quirks mode
    Is this true as I've never heard that? I thought only the doctype could throw a browser into quirks mode so I'd be interested to know which browsers this may effect?

    Everyone's in agreement here though. I presume that the designers have created the code and reused parts of the layout elsewhere on the page without thinking about how id's are used and the consequence will be that they'll have to go through and change their code.

    I wouldn't have thought it'd be a huge change though, just change the id's to class in the html and the # to a . in the css and it should validate fine assuming that's the only problems.

  10. #10
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for the comments.

    Apparently, it's going to take a bit more work than simply doing a search and replace of ID="X" to class="X". A lot of the IDs they reused already have classes attached to them. Think of a box that has an ID and a class that determines the background color/font/etc. The box is reused a lot.

    But yeah, they're going to fix it. It makes me wonder how many others they have designed like this since they said this is how they always did it.

    -Syld

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can have as many classes attached to one element as you like using a space separated list.

    class="class1 class2 class3"
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Member
    Join Date
    May 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You can have as many classes attached to one element as you like using a space separated list.

    class="class1 class2 class3"
    Oh, did not know that (I'm just learning CSS ). So I guess it will be a pretty easy thing for them to fix. Thanks for the info.

    -Syld


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
  •