SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: CSS rule naming

  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS rule naming

    I am trying to set some standard guidelines for myself when working with CSS.

    I've always been in doubt what's best, if any, to use in such a situation.

    Let's say I have a sidebar containing a number of links.

    Now should the styles for these links be given a rule like this:

    #sidebar.links

    or

    .sidebar-links

    Right now I would opt for the first as it seems a bit cleaner and also allows me to neatly group all styles that are
    particular to the sidebar in one place.

    Which one would you recommend, or maybe a completely different style of naming?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Juist do whatever naming scheme works for you . There is no "convention" unless you start naming stuff like .red or something like that.

    Don't make the class name what it will actually aesthetically look like.

    It's as simple as that. Do what works for you
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    San Diego
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do something like this:

    Code:
    #sidebar-links { unique styles go here; }
    #sidebar-links li { unique styles go here; }
    #sidebar-links a { unique styles go here; }
    HTML Code:
    <ul id="sidebar-links">
      <li>Links go here</li>
      <li>Links go here</li>
      <li>Links go here</li>
    </ul>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Watch out for the first one, as the browser might think you are targeting an element with an ID of sidebar and a class of links. Not sure if that's actually valid CSS, but better not to use dots in names.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's valid CSS. It's called concentating .

    I hope I spelled it right lol . IE6 is a bit quirky with that though so it's best to avoid it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I hope I spelled it right lol .
    ConCATenating—from "catena", a chain (Latin). I just haven't found a clear statement in any book that you can chain a class to an id, although I've seen it done. Must check the docs, I suppose.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You can chain anything you want .

    I do agree it's not well documented. I googled to find the correct spelling although after a few queries I was unable to find anything of use (it kept bringing up "concentrating" )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast jnicol's Avatar
    Join Date
    Jul 2006
    Location
    Melbourne, Australia
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do as kgraves.sd suggested, and try to target HTML elements as much as possible e.g.

    #sidebarLinks li {}

    This minimises the number of class and id attributes required in the markup.

    As far as the way I name my selectors, I favour camel casing e.g.

    #sidebarLinks {}

    I have a very pragmatic reason for choosing this approach. When trying to select a string in my IDE by double-clicking it, only the portion between hyphens will be selected. If there are hyphens in the selector name, this is very frustrating!

    For example, if I double clicked within "links" in "sidebar-links", only the word "links" would be selected, rather than the entire string. In my experience most text editors behave the same way.

    Whereas if my selector name is camel cased, a double click will select the whole thing.

    Regarding concatenation, if IE6 support is important to you be aware that IE6 has problems with chained selectors:

    http://www.ryanbrill.com/archives/mu...-classes-in-ie

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I just haven't found a clear statement in any book that you can chain a class to an id, although I've seen it done. Must check the docs, I suppose.
    Yes as Ryan said #id.classname or .classname.classname is fine but Ie6 is buggy with it and best avoided if ie6 support is needed.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Yes but with camel case there is much much more room for error since you have to make sure the subsequent words are capitalized otherwise the selector won't work.

    Since you will be repeating rules in the CSS camel case can bring significant headaches if you mess one up, and they are extremely hard to notice in the CSS
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Juist do whatever naming scheme works for you . There is no "convention" unless you start naming stuff like .red or something like that.
    There is a convention: make the name logically explain it's function, not it's effect, for example call a list of links... linkList but don't call it redBorder

    PS: I prefer camel case because using non alphanumeric characters in CSS names kinda make me nervous.

  12. #12
    SitePoint Enthusiast jnicol's Avatar
    Join Date
    Jul 2006
    Location
    Melbourne, Australia
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes but with camel case there is much much more room for error since you have to make sure the subsequent words are capitalized otherwise the selector won't work.
    Personally I've not found this to be an issue (ok, maybe once or twice!), as I'm very used to camel casing from PHP and ActionScript.

    But I agree it does introduce a margin for error.

    For me it comes down to the convenience of being able to easily select the class/id name in my text editor, for copy/paste purposes. I weighed up the pros and cons of various naming conventions, and decided that for me the advantages of camel casing outweighed the negatives.

    Another approach that would have met my requirements (double-clicking selects the entire class/id name), and eliminated any margin for error is if I used only lowercase, e.g.

    #sidebarlinks {}

    In fact I used to name selectors in this manner, but found them confusing to read. After that I switched to hypenated selector names, but the double-click thing constantly tripped me up, so I eventually settled on camel case. Somewhere in between I might have used underscores too!

    I guess there is no perfect approach. Unless my IDE has a hidden preference to ignore hypens when making a selection...

    EDIT: I had been lead to believe that underscores were illegal in CSS selectors, as stated by Roger Johansson: "Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-)"). http://www.456bereastreet.com/lab/de...standards/css/

    However, reading the W3C section on CSS2 Syntax (http://www.w3.org/TR/CSS2/syndata.html#characters) it in fact states that underscores are acceptable.

    Does anyone have thoughts on this?

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    If the W3C says their acceptable, their acceptable. While 456 Berea St is a pretty well respected blog (especially when it comes to accessibility), they probably just forgot that underscores were still valid. I think Camel Case only becomes an issue if you forget case-sensitivity is an issue in coding.

  14. #14
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If in my example I would want to move the links from the sidebar to another section of the page, it would make more sense to have the ul having a class of .links instead of .sidebar-links which would result in some confusion as it would not still be located in the sidebar.

    if i was using .links and then having a #sidebar.links rule I would just create a new rule #newsection.links in the css.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Underscores are allowed in css2.1 but not previously in css2.

    The changes section at the w3c lists the differences between the specifications.

  16. #16
    SitePoint Enthusiast jnicol's Avatar
    Join Date
    Jul 2006
    Location
    Melbourne, Australia
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Underscores are allowed in css2.1 but not previously in css2.
    Aha! Thanks for the info. It's good to know that underscores now have the stamp of approval.


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
  •