SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difference between ID and Classes

    I've been thinking more and more my understanding of IDs and classes may not be correct. It was my understanding that classes are for defining styles, and semantic references which can apply to more than one element on a single page. Whereas IDs are used to reference elements on a web page which only appear once and must only appear once.

    So for example defining content blocks should be done using IDs to identify each content block, and classes used to apply overall styles to them:
    Code HTML4Strict:
    <div class="content-container">
        <div id="main-content" class="content-divider">
            <h1>Some title</h1>
            <p>Blah blah</p>
            <h2 id="some-other-title">Some other title</h2>
             <p>Blah blah</p>
            <h2 id="some-extra-title">Some extra title</h2>
             <p>Blah blah</p>
        </div>
        <div id="related-content" class="content-divider">
            <h2>Some title about related content</h2>
            <p>Blah blah</p>
            <h2>Some title again</h2>
             <p>Blah blah</p>
        </div>
    </div>

    But then again your only going to tend to have one container for content on a page and a few dividers of content at the maximum, so should content container be an ID? The h2 in the main-content have IDs so that they can be replaced with images. What about navigation? Should the main navigation be defined using id="primary-navigation", and should it be applied to the <ul> or a div wrapped around the list?? Would they also be content-containers?

    I'm in a muddle, what are your opinions? Or am I asking pointless questions, I guess its down to me how I code my website, but I would rather adhere to common semantic and no wasteful practices than just code as I see fit.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  2. #2
    SitePoint Addict Newviewit's Avatar
    Join Date
    Apr 2008
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have content that's using the same style across many pages or elements then use class.

    If it's a one off item then use ID
    UNLIMITED Domains - UNLIMITED Disk Space - UNLIMITED Bandwidth
    *Black Friday - Website Hosting Deal of The Year - 50% OFF!

  3. #3
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID = use once
    Class = use many

    Learn accessibility, image optimisation, and things that actually matter before worrying about petty things like naming conventions.

  4. #4
    SitePoint Zealot Luke Morton's Avatar
    Join Date
    Jul 2005
    Location
    Essex, England.
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What can I say I can be a bit of a perfectionist, but I guess I agree rochow there are much more important issues.
    Luke Morton
    UK Web Explorer| lukemorton.co.uk

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Styles can be applied to both ids and classes. An individual element can have one id and as many classes assigned to it as necessary to apply the styles. The fewer ids and classes you use the better.
    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="^$">

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    Besides increasing the size of the page what difference does an increased amount of class or id names make in comparison to a decreased amount? What is the concrete argument against the use class and id names? I agree that excessive use may make the mark-up bloated and difficult to read, but as for the fewer the better there doesn't seem to be any type of gain associated with using fewer class or id names.

  7. #7
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Besides increasing the size of the page what difference does an increased amount of class or id names make in comparison to a decreased amount?
    Minimalisation: for the same reason <ul id="menu"> is used, not <div id="menu"><ul>

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    What benefits does class and id minimalism provide to the audience or developer?

  9. #9
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    What benefits does class and id minimalism provide to the audience or developer?
    What benefit does class stuffing provide?

  10. #10
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Oddz.

    What if someone is using 'microformats' to markup content. I think that classes/ids can be used for more than just styling hooks

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    The most predominate benefits are maintainability and flexibility. By identifying all predominate parts pf the html you essentially eliminate the need to ever go back through the html on behalf of not being able to select a element.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oddz View Post
    The most predominate benefits are maintainability and flexibility. By identifying all predominate parts pf the html you essentially eliminate the need to ever go back through the html on behalf of not being able to select a element.
    Of course if you only ever style all of a given tag the same way within a particular id or class then there is no need to add classes or ids to any of those tags since you can always reference the tag as a child of the given class or id. It is amazing how many web pages have extra class tags that are completely pointless since they add absolutely noting to flexibility and just make the page less maintainable.

    Consider:

    .firstlist {color:red}
    .secondlist {color:blue}

    <ul>
    <li class="firstlist">A</li>
    <li class="firstlist">B</li>
    <li class="firstlist">C</li>
    </ul>
    <ul>
    <li class="secondlist">D</li>
    <li class="secondlist">E</li>
    <li class="secondlist">F</li>
    </ul>

    which is less maintainable and no more flexible than:

    #firstlist li {color:red}
    #secondlist li {color:blue}

    <ul id="firstlist">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul>
    <ul id="secondlist">
    <li>D</li>
    <li>E</li>
    <li>F</li>
    </ul>

    There is nothing wrong with specifying the ids and classes that are actually needed (and unfortunately forms need separate ids for every label) but a lot of people flood their HTML with classes on everything when a minor change to the way the CSS is coded would do away with many of them (as in the above example). I guess there are lots of people around who don't really understand CSS properly since so many seem to take the first approach rather than the second despite the only difference between them being that the second is easier to maintain (since you don't have to remember to add classes to any extra li tags). Of course where the classes and ids form part of a specific microformat then those are required where the format says they need to be.
    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="^$">

  13. #13
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By identifying all predominate parts pf the html you essentially eliminate the need to ever go back through the html on behalf of not being able to select a element.
    Unless you have elements not styled at all, they'll be accessible via the CSS anyway.

    <div id="header"><p>whatever</p></div>

    #header p {}

  14. #14
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Learn accessibility, image optimisation, and things that actually matter before worrying about petty things like naming conventions.
    Naming conventions do *really* matter!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  15. #15
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Naming conventions do *really* matter!
    Hmm:
    - Fast loading site, not the best ID and class names
    - Slow loading site, correct ID and class names

    Gee, that's a toughie

  16. #16
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We need to ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example <ul id=”nav”>, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id=”footer”>. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class=”sidebar-box”>.

  17. #17
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Hmm:
    - Fast loading site, not the best ID and class names
    - Slow loading site, correct ID and class names

    Gee, that's a toughie
    What makes you think it has to be a trade-off between the two?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  18. #18
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    What makes you think it has to be a trade-off between the two?
    Learn accessibility, image optimisation, and things that actually matter before worrying about petty things like naming conventions.
    Naming conventions is the hands down least important of those.

  19. #19
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    Naming conventions is the hands down least important of those.
    No it's not. Just because image optimization and accessibility might have more of an effect on the end user doesn't mean they're more important than naming conventions.

    And you didn't answer my question, why does there have to be a trade-off between the two?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  20. #20
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    No it's not. Just because image optimization and accessibility might have more of an effect on the end user doesn't mean they're more important than naming conventions.

    And you didn't answer my question, why does there have to be a trade-off between the two?
    Might? Are you kidding?

    Let's take Bob, Jack and Fred.

    They visit www.site1.com
    - Images optimised
    - Accessible
    - Not-so-great ID and class names.

    It loads fast, it works it a variety of situations (image off/css on, css off/images on, font size increased, screen resolution). They have no problems with the site, and they become loyal readers/visitors/buyers.

    They visit www.site2.com
    - Images not optimised
    - Site not accessible
    - Great ID and class names.

    It takes forever to load, it doesn't works it a variety of situations (image off/css on, css off/images on, font size increased, screen resolution). They have problems with the site and they don't become readers/visitors/buyers.

    What difference did the ID and class names make? Nothing.

    So what you have to ask yourself is who you are making the site for: your visitors, or the odd HTML coder who will come along and view the source?

    He is learning, and naming conventions is far from #1 on the "to learn" list.

  21. #21
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I shouldn't have used the word, "might"!

    I am not only talking about ID/classNames in HTML - I am talking about naming conventions in general and their importance in ensuring a semantically built and easily maintainable site.

    From a learners perspective I would say that naming conventions are just as important as accessibility/optimisation, if not more. Learning has never really been about application - it's more about the theory being application.

    Naming conventions form the foundation of all web development technologies! Surely, when learning, it's more important to start with a foundation than with advanced topics (regardless of real-world importance/application)...?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  22. #22
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whether it's called #footer or #copyright isn't a big deal. If it's not built to be accessible to everybody no matter their browser, settings, resolution, OS, net speed, then it's not very good. As long as the right tags are used, having perfect naming conventions isn't important.

    Learning has never really been about application
    Ok cool -so I'll go out and get behind the wheel of a car every day for a month, you read about it every day for a month - no prizes for guessing who's going to be the better driver.

    Foundation? Hardly. I can write HTML without using an ID or a class, therefore it's most definitely not a foundation (foundation is something you need to have, like <html> at the top of the page)

  23. #23
    Django Jedi neron-fx's Avatar
    Join Date
    Sep 2007
    Location
    Bristol/Bath, UK
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys I agree with both of you for different reasons.

    Jimmy P is perfectly correct when he said naming conventions are VERY important

    Quote Originally Posted by rochow View Post
    Whether it's called #footer or #copyright isn't a big deal.
    try telling that to a team of website designers who dont have rules in place or follow their rules for naming conventions! Watch bugs, frustration and delays consume the project! naming conventions are important! I work in a team of application developers and everyone of us sticks to the naming convention... its a very strict rule!

    However I also agree totally with what you are saying rochow! Sites do need to be accessible, quick and optimised.

    Balance is the keyword here IMHO!
    Neron-Fx
    Everytime a user opens Internet Explorer, a web developer dies...
    http://www.savethedevelopers.org/

  24. #24
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The difference between an ID and class is specifity. An ID has a higher specifity than a class which means the former will override the latter. Furthermore, you can combine multiple classes in a single HTML element but you can't use more than one ID for an element nor can you use it multiple times within an HTML document.

    This article has some really good information and a few resources for further reading.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  25. #25
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are talking about something completely different.

    Naming conventions are just that - rules set in place to create a set standard. For example:
    - Always name the main menu #menu
    - Always name the footer #footer
    - Always use the class .alt for anything that alternates

    They are different to me going, hmm, what should I call it:
    - #footer
    - #copyright

    You can change the naming convention to:
    - Always name the main menu #nav

    As long as everyone in the development follows it, who cares.

    You are talking about the rules. I am talking about the actual name.

    I'm not advocating naming things badly; seriously, whether it's called #footer or it's called #copyright means squat in the big picture, I can't believe people would be naive enough to think otherwise (then again...)


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
  •