SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: id vs classes?

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    id vs classes?

    I prefer to use id over classes (I.E. <div id="test"> )simply because it's quicker to write My question is; does browsers in general handle ids as well as classes?

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to do so as well and Creole yelled at me. I haven't recovered since. So now I use classes for everything. The major problem with id's is you can only have one per page. You create more work for yourself in the long run that way. It's more to maintain when everything is ID's and that defeats the purpose of CSS. ID's have their benefit, but in most cases, CLASSes are better. As for search engines....no problems there.

    Sketch
    Aaron Brazell
    Technosailor



  3. #3
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll frequently see me using IDs for main parts of a page, such as the navigation or content areas (#leftnav or #content). The thing is, I only need to use these items once across my pages, so it works perfectly well. I use classes to actually style elements (p.someRedText), but I guess it's really just a matter of personal preference.

    I'm really a nitpicky kind of person, so anything you can do to classify itmes further, well, the more power to ya!

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    The major problem with id's is you can only have one per page.
    I don't understand because I use ids more than once on some pages and that works fine. Can be it be that I have just been lucky and had no conflicts? (I'm new to CSS and haven't used it long.)

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it won't validate and you may have problems with some browsers.

    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks for the information. I will switch to classes then

  7. #7
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remember that you can have multiple (space-separated) classes affect one item. You can also use contextual selector where the all the children and only the children of an element are styled in a certain way. I try and use the whole bag of selectors that's in CSS.

    Lets take for example, we're designing a navigation bar, this stylesheet:
    Code:
    A { color: #ff0 }
    #logo { float: left; top: 10px; font-style: italic; }
    #header { #0f0; text-align: center; }
    #nav { color: #00f; background: #3c3; }
    #nav A { text-decoration: none; color: #00f; }
    .right { float: right; }
    .huge { font-size: 2em; font-weight: bold }
    .green { color: #3c3; background: #00f; }
    .small { font-size: smaller; }
    and this HTML:
    Code:
    <div id="header">
      <span id="logo" class="green huge">Logo</span>
      <h1>This is Not Very Pretty</h1>
      <address class="right small green">By <a href="./page">Ian Glass</a></address>
      <p id="nav" class="small"><a href="./home" >Home</a> |
       <a href="./previous">Back</a> | <a href="./next">Next</p>
    <div>
    Would all probably end up looking like the attachment (admittedly it's hideous, but it's just illustrative ;-).

    It's not that IDs are any better or worse than classes or contextual selectors, it's that they're all different tools for the job. IDs are for unique elements like logos, page headers and what not; classes on the other hand are for common themes and shared styles between multiple elements; and contextual selectors let you cut down on typing all those classes (like I did here for the #nav bar links).

    They're all different tools for different jobs and you probably should use the whole slew of CSS selectors available to you. :-)

    ~~Ian

    P.S. Attachment will show as soon as an advisor approves it
    Attached Images Attached Images

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation Ian. I see now how ids and classes work and what to use when. Also thanks for the illustrative attachement

  9. #9
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Atlanta, GA, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resolving conflicts with multiple class assignments?

    Ian, you have an example where you say for example class="green huge". If we assume there are conflicts (i.e. if both classes specify a color and it's not the same color) what will the result be? Or is that undefined in the CSS standards? [You could argue it would be bad design if it happens but it's nice to know the implications anyway ]
    Claus
    www.photoedits.com - Photo Restoration Services

  10. #10
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And I would argue that... ;-)

    Anyway, I think the various classes descend in weight: i.e. the first class has the most weight, then the next in line, and then... I think do remember it being addressed in the standard, but I'm not quite sure exactly where in the spec it is.

    You might want to have a look-see at the link I had in my post. It might be there, if not check the CSS1 spec under selectors (or whatever). :-)

    ~~Ian

  11. #11
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We're talking cascading and inheritance here folks: http://web3.w3.org/TR/REC-CSS2/cascade.html

    HTH

  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dalixam...

    Look at it like this:

    A Class is a set of styles which may affect more than one page element.

    An ID is a set of styles that can only affect ONE page element. Thus the name ID (which MUST be a unique name). ID's are typically used when you want to perform some sort of action on a page element. dHTML items almost ALWAYS use ID because you want to DO something to it.

    Note: a page element which is defined by an ID, contained in a page element defined by a class may be affected by that class.

    It's of course not a hard and fast rule, but it makes more sense to use classes when you want to apply the same set of styles to several different elements on a page (headers; bold, red text; etc.). ID's should be used ONLY when a page element will be the only one of it's type on the page (copyright line; a show/hide DIV for an image; etc).
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •