Tangler Discussion Forums

Discuss

Topics

Click a Topicto start discussing

    I've been pokin' around about this for a bit, but everyone has a different idea, curious what you guys think.

    When creating css id and classnames, what are your best practices for naming conventions that will not interfere with scripting and/or imports??  By this I mean that with some javascript libraries there are often issues with the hyphen (-) in classnames that become math expressions, miss-interpreted ids, etc.

    Are there certain characters that do not cause problems, or do??  What do you guys think?? 

    2007-02-06 10:46:22.0

    I think it is good practice to just avoid hyphen entirely due to the JS issue. If I absolutely need something of the sort, I use an underscore, but that's pretty rare

    2007-02-06 14:24:01.0

    hyphens are probably a good idea

    2007-02-06 14:48:15.0

    and starting w/ microformats is also good

    2007-02-06 14:48:22.0

    So how do you avoid the minus operator issues, Chris?

    2007-02-06 14:55:02.0

    minus operator issues?

    2007-02-06 16:00:15.0

    which are those?

    2007-02-06 16:00:29.0

    The ones MindHacker is referring to above. Some JS libraries overload the Object and thinks get weird

    I don't use anyone else's libraries, so it doesn't really bother me

    Technically, a hyphen in a class name should always be in a string, I'd think, so it shouldn't matter 

    2007-02-06 18:49:19.0

    Do you have a link Lach? 

    2007-02-06 18:49:48.0

    I've been playing the name format game for a while now and just havent found anything that just does it for me.  The problem that I run into is that many other people will have to read my markup, styles, and code long after I have written and it moved on.  I need things to be as clear as can be, simply because some of the people that will be viewing and maybe even updating my stuff in the future aren't exactly the sharpest tools in the shed.

    "myClass" bothers me because it looks too much like a js "myFunction".  While browsing or searching the code, class names and function names are indistinguishable.     On the other hand cramming "myclassnamethree" into your markup creates and even bigger cluster fsck.  I've seen alot of overly descriptive class names lately as well. ie: "form-radio-wrapper" or "col-left-static".  I mean, at what point does this just get too out of hand.  It seems to me that the use of css should eliminate the "tag soup" days of old, but now all I see is people creating "a-class-for-doing-something-in-css".

    Maybe I'm just ranting, or maybe having my head buried in Perl and Python code for so long has killed my tolerance for stuff like this.  Nontheless, its always good to hear what other people have to say.

    2007-02-07 10:22:48.0

    Personally I avoid using hyphens in any code.  IMO, standards you'd learn to use when coding in Java should apply to almost all languages (scripting, markup, or real programming).  However, since you aren't defining classes and functions in CSS per se, I think the rules of always beginning class names with capital letters and such can be dispensed with.

    2007-02-27 21:46:11.0

    camelCaseForever!

    2007-02-27 21:50:47.0

    Also, better for your CSS selectors to be more descriptive than to make them incomprehensible to developers who may look at the code later (including perhaps your future self!).  I agree with Marty - camelCase is great, but I also sometimes use underscores.  I think either is fine as long as you're consistent, and it's just a matter of preference.

    2007-02-27 21:52:15.0

    One thing I hate about designers/developers new to CSS is how they tend to name things according to what they want an element to look like, rather than according to its function or purpose (ie: .bold_red rather than .error).  CSS Zen Garden is a prime example of how CSS should be named semantically.  The beauty of CSS is that you can simply edit a single stylesheet to change your design rather than having to changed all of those <bold><font="red"> tags.  Perhaps someday you'll want to make your errors display in something other than bold and red, and then it wouldn't make sense for your CSS class to be called .bold_red!

    2007-02-27 22:01:56.0

    Totally agree. Smarter CSS naming became more obvious after having to redefine styles multiple times during a website redesign.

    2007-02-27 22:08:57.0

    Anyone serious about web dev standards should frequent SitePoint.com and pick up their books too.  I'm making my way through their new Ruby on Rails book and as always I appreciate their commitment to standards and accessibility.

    2007-02-27 22:21:30.0

    Agree with Marty on use of camelCase (no hypens) and with cookj on CSS naming

    2007-02-28 02:53:39.0

    the hyphen issue... i'm no coder, but i do write/edit/play with some css. i didn't know about this js compability problem yet. and, just to make an example, i'm toying with wordpress code right know. base play theme is wp sandbox http://www.plaintxt.org/themes/sandbox/

    take a look at wp css class names: blog-title, blog-description, nav-above, nav-bottom, entry-title, entry-head, ... .... 

    2007-06-18 00:38:29.0
To send a message, Join Now (it's quick and free) or Sign In
Edit Topic
Delete Topic
Are you sure you want to delete the topic