Skip navigation
Currently Being Moderated

CLASS or ID?

Apr 12, 2012 11:19 PM

Tags: #class #css #id

When I started using CSS about 140 moons ago, the way that I remembered the difference between an ID and a Class was as

ID = A student's Identification is unique to one student

Class = There are many students in a class.

 

Now that I have been using javascript more and more, I get confused when I see an ID. Did I use the ID for styling purposes or did I use it for identification within javascript?

 

w3.org states the following:

 

Attribute definitions

 

id = name [CS]

    This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS]

    This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

 

The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values:

 

<P id="myparagraph"> This is a uniquely named paragraph.</P>

<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

 

The id attribute has several roles in HTML:

  •     As a style sheet selector.
  •     As a target anchor for hypertext links.
  •     As a means to reference a particular element from a script.
  •     As the name of a declared OBJECT element.
  •     For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

 

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

  •     As a style sheet selector (when an author wishes to assign style information to a set of elements).
  •     For general purpose processing by user agents.

 

Nowhere does it state that a class attribute cannot be unique, this would depend on the website developer on how he/she implements the class. ID does have a limitation in that it must be unique.

 

This means that we have a choice when using an attribute where it is used just the once in a document, class or ID.

 

But we do not have a choice when it comes to identifying a target anchor, or reference a particular element in javascript, or name a declared OBJECT element, these all require an ID.

 

Logic now says that we should not be using the ID attribute as a style sheet selector, a class attribute does this just as efficiently as an ID. OK I hear you saying ‘what if the element with the ID needs styling?’. In this case there is nothing wrong with applying a class attribute for styling purposes as in <div id=”John” class=”Maths”>.

 

Please give me feedback on this topic and tell me that I am wrong. Otherwise I will start boycotting the ID attribute from my style sheets. In fact I would love to see w3.org adjust the roles for an ID to exclude the style sheet selector bit.

 

Gramps

 
Replies
  • Currently Being Moderated
    Apr 12, 2012 11:48 PM   in reply to Ben Pleysier

    Hi Gramps,

     

    I for myself probably once again have not perceived the depth of your essay because it is written in English. I remember Murray's comments to this points (without JavaScript) but they also seem obviously no help in this situation, also seems obviously just as (excuse me for quoting this) http://css-tricks.com/the-difference-between-id-and-class/ and similar.

     

    To cut a long story short, thanks for your question!

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:15 AM   in reply to Ben Pleysier

    I can't say for sure Gramps BUT yes a class can be 'unique' if only used once on a page so

     

    <div class="foo"></div> is probably as good as <div id="foo"></div>

     

    What bothers me is when you run into trouble getting a selector to work, the hierarchy aspect when you have a lot of child <divs> - is:

     

    .foo .blah {

    }

     

    going to be as good as:

     

    #foo .blah {

    }

     

    Until tested over a period of time one can't tell, so abandoning the id probably is not something I will do at this particular time. What you are saying on the face of its seems logical though.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:39 AM   in reply to Ben Pleysier

    There's nothing wrong with your logic AFAICS.

     

    It's sound enough. It's a matter of style (pardon the pun) and preference when authoring your CSS and Javascript.

     

    I've recently read a couple of online articles which came to the same conclusion:

    http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/

    http://oli.jp/2011/ids/

    http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-cla ss/

     

    If you prefer classes only for CSS and IDs only for Javascript then go for it. Won't make any difference to the functionality of your websites.

     

    You can safely ignore the CSS specificity weighting advantages of IDs (and the confusion sometimes generated by conflicting rules) since they won't come into play.

     

    The important metric relevant to CSS is that you can, via the markup and the DOM, reach every element (or hook) that you need to, however deeply nested, in order to apply every style (however unique). This seems to be achievable via classes alone. It may also permit cleaner, less confusing, rule construction (and less !important declarations) with no IDs further up the cascade trumping class based rules.

     

    An added point reinforcing your argument is that HTML5 introduces tags such as <header>, <footer>, <aside> and <nav> which can be used as unique CSS tag selectors in lieu of applying IDs to generic <div>s in HTML4.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:26 AM   in reply to hans-g.

    Hello Gramps,

     

    Have you seen the LINT thing?  I don't use it because it just freaks me out; I think it's a bit of a bully (does that give away that I don't know half of what it does?)  http://csslint.net/

     

    Anyway, this is its concept behind not using id in CSS.

     

    https://github.com/stubbornella/csslint/wiki/Disallow-IDs-in-selectors  That has a couple of interesting short articles linked to at the bottom.

     

    I don't have a lot to do with Javascript other than with plugin stuff so can't really comment on that.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 1:33 AM   in reply to martcol

    martcol wrote:

     

    Hello Gramps,

     

    Have you seen the LINT thing?  I don't use it because it just freaks me out; I think it's a bit of a bully (does that give away that I don't know half of what it does?)  http://csslint.net/

     

    Anyway, this is its concept behind not using id in CSS.

     

    https://github.com/stubbornella/csslint/wiki/Disallow-IDs-in-selectors  That has a couple of interesting short articles linked to at the bottom.

     

    I don't have a lot to do with Javascript other than with plugin stuff so can't really comment on that.

     

    Martin

     

    Stop reading...it just confuses you even further. So we have come to the conclusion after years of ramming down the throats of others how wise it is to use ids and static <divs> its now ok to use classes and absolutely positioned <divs> on account every modern browser by default is set to zoom the complete page....... bugger the minority.

     

    Hummm seems like we are heading backwards.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 8:50 AM   in reply to Ben Pleysier

    Altruistic Gramps wrote:

     

    In fact I would love to see w3.org adjust the roles for an ID to exclude the style sheet selector bit.

     

    Gramps

     

    Agreed 100%

     

    but errr... I always thought you were the W3C  *grin*

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 9:00 AM   in reply to osgood_

    osgood_ wrote:


    Stop reading...it just confuses you even further....

     

    What?  And risk the chance of not catching up with you and Gramps?

     

    I have to say the logic of not using ID, especially with the new elements available in HTML5, seems to make sense to me.  Like I say, its the Javascript thing that bothers me so until I understand that a bit more, I just er... keep reading.

     

    Martin

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)