My take on naming conventions... opinions?

[AtXRACER]

I have been using these naming conventions for a while now and I just wanted to know what some of you think of it. I'm open to good/bad criticism and would like to see what others are doing as well.

I use camel casing instead of hyphens for the following reasons:
-easier and faster to type
-learned this method in college for programming
-one less character meaning less typing and possibly a smaller file size
-I work with back-end developers so it's easier for them to adjust to

for ID's I start the word with a lower-case letter, and for Classes I start the name with an upper-case letter. This has actually been pretty helpful because it allows me to easily tell if im looking at an id or class. I know id="" , class="", #'s , and .'s tell us this but its still one more way to identify them.

example:

/*----- =Main ---- styles for main content area -------*/
#pageContainer
{
background:#cccccc url(image/someimage.png) no-repeat 5px 40px;
padding: 20px 30px;
}

....

/*----- =MyClassName ---- styles for some specific control -------*/
.MyClassName
{
color:#999999;
margin:10px 5px 20px;
}

....

Any thoughts?

[slaughters]

I use camel case - BUT - I've always had problem with using it when the variable represents an abbreviation (like ID, HTML, etc..)

ex) IDstring in camel case should really be idString or IdString - which just does not look right to me.

[AtXRACER]

I pretty much make any abbreviations all caps. like your IDstring I would write as IDString. more ex's: #veteranOfUSAF , .MyCSSClass

[toicontien]

I've used underscores to denote a "name space" for styles, even though no such thing exists in CSS to my knowledge.
.comments_title
.comments_content

.article_title
.article_content

The general formula is:
nameSpace_camelCase

I'll do this if I release some code to the wild, where I know the CSS will be used on other sites where I don't control the style sheets, and creating a "name space" in my CSS styles helps ensure my code doesn't accidentally inherit styles from another style sheet.

Otherwise, I always use camel case, and always start with a lower case letter. The "#" and "." is easy enough for me.

[felgall]

[QUOTE=toicontien;973101]I've used underscores to denote a "name space" for styles, even though no such thing exists in CSS to my knowledge.
.comments_title
.comments_content

.article_title
.article_content
QUOTE]

I tend to use the "namespace" option built into CSS itself to do that.

#article .title
#article .content

[toicontien]

I tend to use the "namespace" option built into CSS itself to do that.

#article .title
#article .content

Yup. But that assumes the web pages my HTML and CSS exist on do not already have a #article Id. I tend to use my hacked "name spaces" only when I release code that will be used on other web sites out of my control.

[slaughters]

Would "#article .title" work if you had more than one article to format ?

In JavaScript (and HTML) there can be problems if you have more than one element with the same ID value.

[toicontien]

I don't think Felgall was necessarily saying we should use more than one Id, but that by using certain CSS selectors, in this case the descendant selector, you pretty much create a "name space".

[Charles]

I typically do use hyphens fo my IDs and classes, and my file-names, simply because I can. And I think that it looks nicer.

[felgall]

Would "#article .title" work if you had more than one article to format ?

In JavaScript (and HTML) there can be problems if you have more than one element with the same ID value.

Fot that you'd use a class on the wrapper instead of an id.

You just need to wrap all your content that you want the styles to apply to within a div having that id or class in order for the styles to only apply to that part or parts of any page that you add them into.

If you are worried about naming clashes with what is in the page already then change the id or class for the wrapper to include something that is unique.

Often you will not even need to assign classes within your code block and can just style all occurrences of a particular tag within the block the way you want. That way you keep the number of classes you need to a minimum.

So in fact your code for multiple articles might be:

.felArticle h2
.felArticle p