SuzyUK - 6:12 pm on May 26, 2008 (gmt 0)

Yes Edward, I realise that nothing ever works smoothly once a site starts to grow, however because this probably affects most sites regardless of their coders level is exactly why I try to say get the basic markup right first, even add in extra hooks, spans, em's just in case to help take care of a standardising the CSS

a lot of the advanced coders we could probably target an element without an extra class using advanced selectors, but as that's our Utopia I'll give ;) and say I would advise when building a site (or a soon as you need to get the programmers to change anything) rather than setting up extra *generic* "just in case" classnames in the CSS, which you would then have to add to the HTML anyway, rather go in and add extra CSS hooks, even wrapper divs/spans (e.g. like is used in image replacement), but don't even think about the final design, colors etc.. rather add in what could be useful going forward.. what I mean by useful is, something you have no specific plans for yet but might need to add to in the future, like adding an image replacements for headers, or

e.g. if that red text is a warning or notice make sure the division (div) the h2 or <p> or whatever elements are to be taken notice of are inside a classified area, use whatever classname you like don't restrict it to nowing what the actual text is going to look like you don't need to care about that yet.. - you can style an h2 {} differently from an h2 em {} and the <em> element is more semantic when describing what your red text is doing. also you can style a .notice p {font-weight: bold;} different to a .notice h2 {color: red;} so you see you are again able to reuse the class name.

In this day and age of different medias one should be thinking more in terms of the semantics of the HTML elements themselves than knowing what the final look across medias is going to be, adding/naming classes for a single property value is akin to using font tags with it's associated attributes, it's adding a fixed style via the HTML (well not quite as you can change the style on the class regardless of what it's called but h2.red{color: blue;} doesn't really make much sense as a standard does it?).

To me if you are trying to set a CSS standard for your employees to follow (as a base guideline) you need to get the HTML standard down first. for too long programmers had written programs that produced the only HTML they knew how to, but that has changed massively in the last few years, as knowledge does inevitably cross barriers. There is now a lot of emphasis on producing semantic HTML i.e. using hx elements for their intended purpose and not just because they make text bold - this is because it needs to make sense to more medias than just the visual screen.

If you need to take the styling inline to overcome a previous template shortcoming by all means use the style attribute that's what it's for, but adding in a class to add one style attribute via a stylesheet is simply an added layer (no matter what you call the class actually), If you're in the HTML anyway why not just add a proper CSS hook in the right place be it a e.g. <span>, <em> element or adding a <div> around the whole part of the page it applies to e.g. if a division of the page is a warning/notice then classify it as such.. it very rare that a single element should require a class applied to it (perhaps first/last classes on nav lists but that's all I can think of

We could probably pull stylesheets from the top 50 websites and not find much amongst them that was common, or could we?

It would be an interesting exercise and as far as I can remember someone has already done it as a study to see if 'standardising' some of the names would make sense. I can imagine SE's might like it if they could find the "main content" and give it more emphasis? , but I can't remember who it was so.. anyway I'm pretty sure you could find standard things like sidebar, content, heading, nav, main etc.. .. however what I'm almost willing to do is bet we won't find a lot of support for your method of one classname per class named for the purpose, more likely you'll find inline styles. oh and btw Google isn't and never has been a great example as they don't exactly use a complex layout and have only recently started adding IDs ;)

I know it's not easy to get it right from the start I still do not have a "perfect" site and have resorted to adding in class here or there but learning from past mistakes I always make sure that class is a hook rather than a one off which I might have to search and replace site wide for later.

Naming conventions..
you think is bad what about about the fact that you can practically name your elements what you like ;) just like HTML where you could use simply divs or spans to produce the whole markup.. would you? There is no standard per se but it has been oft spoken about and is now second nature in this and other forums.. you know what I mean when I say nav div, header div, footer div or wrapper sidebar column, you know that those divisions contain the the right elements headings, paragraphs, lists etc.. so that is and has to be the basis of any CSS standardisation in an organisation. It's second nature to most who deal with CSS, just look at the CMS templates that are provided. just call it my way of letting you know that you might be making it worse for the future coders if you follow your convention and then someone subsequently takes over the site from you who knows that CSS is more than just applying a text-decoration or color ;) No offence meant to you as I know we all use what works at times. But I would hate to see someone build on this method as a base standard which is the Topic in question here, rather build in too many hooks in the original HTML, all of which needn't be classnames.

I know I'm going to get 10 different CSS strategies

hmm no I think you might get a few different layout templates, but I'm very confident that the actual main divisions (ID's) and the following CSS strategy would be similar inside the original framework as we've all already virtually said the same thing about naming for what it does not what color it's to be

as was said earlier it'll last longer because usually specificity can be added to pinpoint elements e.g. in my sidebar example earlier I may well have a class (or ID) name on three different ul's inside the sidebar .. but I might not need them at the start (for stylling purposes) as all lists are to look the same, however I can and should classify them as different ul's right at the HTML start level, regardless of what they are to look like they are to hold different things e.g. one holds the sidenav, one holds the favourite links, and one holds the recent visitors.. so semantically they are different from the outset regardless of what you think the text-decoration is to be and they should be given a hook to indicate that at the time of writing - that's what I mean about hooks.. as a design element you might not them but your code is now standardisable

#sidebar .nav ul li {}
#sidebar .favs ul li {}
#sidebar .recent ul li {}

note in this case I wouldn't be adding the class just so I could say
.recent {color red;}

I am adding it as a hook to target the whole of the contents inside that particular ul or even an h2 inside the classified section.

Same applies if you want to add emphasis use the <em> or even a span element and target it via it's parent/ancestor class or ID.

it would be easy to write a base standard regardless of the classnames if you think of the document as a whole instead of trying to style one <p>.

Start with the page ID then the main division ID's then work inwards through the division classes to the elements classes until you get as far as you can go which is the inline style attribute, if you're in there and need to change the HTML go back out a bit and add a hook to an ancestor it will enable you to use it again and again.

.. now I had to cut this as it was way too long, and while I hope it's still useful we're taking Ian's topic a bit off Topic by debating naming conventions ;) so see next instalment :)