SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member danfluidmind's Avatar
    Join Date
    Feb 2004
    Location
    Louisville, KY
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Class and ID naming conventions?

    Hi all.

    Does anyone else use naming conventions for their class and id names? I was wondering if a common convention has started to emerge. Personally, I use bumpycase--that is, not using any spaces, hyphens, or underscores and capitalizing the first letter of every word, including the first. E.g., div#Header, div#MainBody, div#SiteNav, div.BodyCopy, etc.

    Anyone have any thoughts and/or preferences on the matter?

    --Dan

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that's called "Camel Case" (because of the humps). I use it too, with the exception that I leave the very first character as lower case.


    Andy
    From the English nation to a US location.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by awestmoreland
    I believe that's called "Camel Case" (because of the humps). I use it too, with the exception that I leave the very first character as lower case.


    Andy
    Actually, when you camelCase, the first word isn't capitalized. You're thinking of PascalCase, popularized by the programming language Pascal/Delphi.

    As for my convention, I tend to put hyphens in my class/ID names if they span more than 1 or 2 words. Other than that, it's all lowercase.

  4. #4
    SitePoint Addict
    Join Date
    May 2003
    Location
    Auckland
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use camelCase

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Actually, when you camelCase, the first word isn't capitalized.
    That's what I meant, but I can see it wasn't that clear when I read it back
    From the English nation to a US location.

  6. #6

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by adios
    Quote Originally Posted by http://www.mozilla.org/xpfe/goodcss.html
    Avoid the descendant selector! - The descendant selector is the most expensive selector in CSS. It is dreadfully expensive, especially if a rule using the selector is in the tag or universal category. Frequently what is really desired is the child selector. The use of the descendant selector is banned in UI CSS without the explicit approval of your skin's module owner.
    I have to take issue with this. A rule like:
    Code:
    #nav a {
      /*rules*/
    }
    Is far more efficient from a maintenance standpoint than styling each link with a certain class.

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think 'expensive' in this context means inefficient, not in terms of site maintenence, but in overhead for the layout engine.
    ::: certified wild guess :::

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by adios
    I think 'expensive' in this context means inefficient, not in terms of site maintenence, but in overhead for the layout engine.
    I agree, I just think it's the wrong thing to show to CSS authors. Perhaps for those testing the Gecko engine, but not for designers who need to maintain this code, possibly for years on end.

  10. #10
    SitePoint Member danfluidmind's Avatar
    Join Date
    Feb 2004
    Location
    Louisville, KY
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's consider those one at a time:

    1) Aside from the fact that his examples use camel-case, this doc says nothing about naming conventions. I do, however, have to whole-heartedly agree with vgarcia about many of the "rules" in this document. Not only it is four years old, but it is a set of rules by a programmer based on what will make his particular CSS engine work more efficiently. For all we know, following those rules might make Opera's or Safari's CSS engines slower! Those rules don't take into account what will make stylesheets more readable and more easily maintained and modified.

    2) Very nice little article which serves to emphasize the importance of having a naming convention and sticking to it. As he says: "it is doubly important to ensure that your class and id names are of a consistent case throughout a document". He does not, however, suggest any particular naming convention.

    3) Another good article. I didn't realize that using underscores in class and ID names caused problems for some browsers. Again, however, he doesn't really recommend a particular naming convention, merely states that camel-case or using hyphens between words both should work fine.

    4) Judging by his examples, it looks like he uses bumpy-case like I do (with the first word also capitalized) and is consistent with it.

    I tend to like either bumpy-case (Header, MainBody, SiteNav, etc.) or camel-case (header, mainBody, siteNav) equally as well. I simply chose the former. I definitely prefer both of those over using hyphens between words (header, main-body, site-nav), probably due to the fact that I'm a programmer and so have an aversion to using hyphens in identifiers (which very few programming languages allow in variable, function, or class names). I do think, though, that all three of the former options are preferrable to just all lowercase (header, mainbody, sitenav)

    --Dan

  11. #11
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had no idea this was an examination...I have lengthy lists of resources culled over the last few years, relating to HTML, CSS, JavaScript, site design, content, etc. I regularly post links like the above, as a sampling of relevant, interesting (to me), or thoughtful opinion. Anyone is free to accept, disparage, or ignore them. Apparently I have now endorsed each and every observation in the above documents.
    I just think it's the wrong thing to show to CSS authors.
    Well...hopefully, with proper counseling, they'll survive it.

    As to the comment that "For all we know, following those rules might make Opera's or Safari's CSS engines slower!" - the key phrase would seem to be "For all we know..." I don't design layout engines - way over my head - so I can't help but give some respect to the opinions of those who do (even if they're four years old - the opinions, that is).
    ::: certified wild guess :::


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
  •