Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 20
  1. #1
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Ok, so I've been using ID attributes more and more in my HTML.

    I've gotten to the point where I'll ID any div that is unique and needs to be styled... whether or not it is something that needs to be referenced by javascript.

    I'll typically do stuff like this:

    Code:
    <body>
        <div id="wrapper">
            <div id="page">
                <div id="header">
                    <div id="logo"></div>
                    <div id="menu"></div>
                </div>
                <div id="main">
                    <div id="left">
                        <div class="block">
                            <div class="blockHeader">
                            </div>
                            <div class="blockBody">
                            </div>
                            <div class="blockFooter">
                            </div>
                        </div>
                    </div>
                    <div id="right">
                        <div id="content">
                        </div>
                    </div>
                </div>
                <div id="footer">
                </div>
            </div>
        </div>
    </body>
    My issue is that I'm not sure all of the ID'ed elements things should be ID'ed. Are there any standards you guys use to determine what's an ID and what's a CLASS, other than whether it will be repeated?

    The reason this came up is because I was considering adding some AJAX functionality to a site today and I was considering using DOM to append to an element... so then I was thinking, "do I really want the style of that element to depend on its id?"

    For example, let's say I want to do something like this:
    Code:
    <body>
        <table id="merchantList" class="list">
        </table>
    </body>
    Well now I've got the element styled by its class and referenced by its id. That's how it should be.

    But what if I want to add dynamism to other elements?

    What I'm beginning to think is that element identifiers like "header", "footer", "left", and "right" should be classes, because it's feasible (even though very unlikely) that they could be repeated and have unique ID'ed instances thereof, such as <div class="header" id="mainHeader"> (for whatever odd reason).

    Anyone else thinking the same thing?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Steven ...
    sort of funny, seems like none of us (including me) really know how
    to properly use them. I just do whatever works, which is probably
    not correct.


  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I do not really have any specific pattern I follow when giving elements classes or ID's, although I do prefer to give divs a class or ID just so looking through it's source I can see it's purpose.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I always think about IDs a bit. They do, after all, imply identity. Take header, for instance. header would probably be a class, but page_header (or pageHeader or whatever) would probably be an id. Still, the likelihood that you'd want to do something with every header in the page seems low. So with classes, I typically avoid setting a class unless I know I'll be needing that group for something. Sometimes I'm more liberal with my ids (i.e., I put them on something I think I might need in the future).

    It's a tough question, but I think it's largely a matter of how your organizational style works. The advantage is that with modern Javascript frameworks, your classes are useful in the Javascript world, too, which makes them even more useful.

  6. #5
    Member Bulletz's Avatar
    Join Date
    Sep 2007
    Posts
    36
    Member #
    15868
    I pretty much agree with Shadowfiend's explanation on this. Since they are almost interchangeable now with regards to Javascript ect., my usage of classes and IDs is governed almost solely by what they are actually really saying, i.e.:

    <div id="pageHeader"></div>
    ... says that the <div> is the pageHeader. whereas,

    <div class="header"></div>
    ...says that the <div> is a header.

    Or in other words, the id attribute identifies an element unique to the page, whereas the class attribute classifies an element.

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    One thing I commonly need to consider is about specificity. Remember that an ID has 10 times (if I'm not mistaken) the specificity of a class.

    Second, there are problems with some JS I've seen if IDs are used multiple times - although this could just be a problem with the library, perhaps.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    No, ids are supposed to be unique, which is why there are issues with those and Javascript. Typically, lookups are usually probably done in a hash table, which means lookups are very very fast. Thus, a lot of libraries just short-circuit any selector involving an id selector to a document.getElementById call as an important optimization.

  9. #8
    Junior Member
    Join Date
    Oct 2007
    Posts
    9
    Member #
    15947
    Or in other words, the id attribute identifies an element unique to the page, whereas the class attribute classifies an element. Well said Bulletz!

    Not to beat a dead horse here but what would be better specificaly for a, ul, etc in a nav. For example if I want the text in a the #header Div to have all links be a particular color other than the other navs, should I.....

    Use #header a or assign a class like .headera

    I am only a copy and paste js guy so anything specific to the relationship with js is really what I am interested in.

  10. #9
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I have actually thought about this quite a bit recently.

    I tend to think of my attributes in terms of the site, not the page. It kind of follows what everyone is saying about generic vs. specific.

    The best illustration of what I mean is in navigation. There's a top level [minicode]mainNav[/minicode], and for some of those, there is a [minicode]subNav[/minicode].

    HTML Code:
    <ul id="mainNav">
      <li id="home">home</li>
      <li id="contact">contact
          <ul class="subNav">
            <li>Marketing</li>
            <li>Tech Support</li>
            <li>Event Coordinator</li>
          </ul>
       </li>
     </ul>
    IDs go to the parts that do not change anywhere on the site. Why do them on each [minicode]li[/minicode]? In case you want to do something specific for the whole list. By having the class on the nested [minicode]ul[/minicode], you still have flexibility to affect every subNav in both the DOM and CSS.
    Shani

    I have an eye for detail like you'd never believe.

  11. #10
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    I just use classes for everything, really. Only time I'll use an ID is if I'm using Javascript, or anything else that relies on an ID attribute. If nothing needs to be identified by the script, I don't use an ID.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com