SuzyUK - 1:21 pm on May 26, 2008 (gmt 0)

you know there isn't one :)

I use an intuitive naming convention as opposed to what others may do. And, it works very well for me which is the bottom line. Others find it very easy to understand too and some have even taken on my styling style.

that's the point, it's intuitive to you, it works for you, but, it's not intuitive if visualising a design from markup - your method means you have to know what the design is at the time of marking up - that's not the point of CSS, or having a designer.

Trying to bring this back to the context of the question, if you're trying to set up a standard for a large site with a separate programming/design teams, which I take it Ian has, seeing as he said:

different designers/coders may be responsible for different elements within a page.

It's not a CSS "standard" to have to go into the HTML to have to change a style, the whole idea is to keep it separate. so that designers can make any changes necessary.

You might know at the start that you want some text to be red, but how can you know that you *might* need that to change to a softer shade of pink once the design is complete because the red is just too harsh? are you coding the design or the markup?

so... if your <h2>'s are to be red, in uppercase, 1.6em and centered, your HTML would look something like this:

<h2 class="red ttu tac fs1-6">your heading</h2>

to change that to be blue (because mr siteowner decides he wants the foo section of his site to blue, the bar section to be yellow, but the baz section to stay red) you need to find every instance of the h2 code in the whole website in order to change the class name red to blue or yellow, this has now become a programmers, rather than the designers responsibility, whereas if you've set yourself up with a h2 classname, and have already IDentified the sections/ divisions so that all h2's site wide follow the same style you go to the one instance in the stylesheet

#foo .myh2class {
color: blue;
text-transform: uppercase;
text-align: center;
font-size: 1.6em;
}

#bar .myh2class {color: yellow;}
#baz .myh2class {color: red;}

and change/add the new color values in one place (a two second job for a designer)

That's what is wrong with your method, you're not separating your team responsibilities according to their job title, you're doing it all, or at least controlling it all. :)

The other suggestions about categorising/classifying the elements according to the section (either page or site) they belong in makes much more intuitive sense to me, because I'm a CSS designer, I don't need to know PHP, ASP, or whatever you programme with, I could make your changes at the design level while your programmers do what they do best!

Not naming classes according to their function has been the basic advice of any CSS coder I know, since it started being used, if you've not understand the why and have developed your own way that's fine, but it is not what I would call the best advice for a standard.

One last time, as I see you've added a bit to your post since I started typing..

what exactly is wrong with "my way"? Huh?

Like I said before your way around you would be as well writing the styles inline because you're doing them at markup time, the designer or design team are not going to have the freedom to make changes without the ability to change the HTML markup. Why bother with the external stylesheet at all, you are not separating the design from the content you are only saving a few bytes in the HTML source - that's not CSS. Also by making up all those extra classes just to provide a way of labeling what is essentially an inline style you are just provide an extra layer of learning what your business coding convention is (first letter replacements) and it'll be the programmers not the designers which have to know this convention, they already know you want that text to be colored red, and they know that style="color:red;" will achieve it, but instead they have to learn that you have a secondary language in order to apply this.

Hardly the best advice in the context of the question which is about coding standards (or I read it as "best coding practice" advice to help decide on a company standard)

Of course there's no manual on naming conventions but as with any language there is always best practice guidelines, it's not a best practice guideline to name classes according to function, everyone is free to code to their own style as long as they are the one in charge of their site, which is why it works for you,

I would not recommend your method to anyone, even if it works well for you - sorry

as for reusable classes..

.notice {color: red;} is reusable because you can apply the "notice" class to any element, div, h2, etc.. as you will likely know at the time of markup which of your elements are a customer notice for example, that's a semantic function as opposed to a design one.. a designer can subsequently restyle the notice class to fit with the overall site design e.g.

div.notice {color black; background: yellow;}
div.notice h2 {color: red;}

.red {color: red;} is only 'reusable' whenever you want RED text, what happens if mr siteowner decides he wants his "notice" text to be in lime green.. that class name is no longer reusable in it's context unless you're willing to write .red {color: #0f0;} into the stylesheet, you have make up a new class instead of reusing the existing one.