CSS and filename coding conventions

Question

What kind of convention do you (or your company) run on filenames and CSS class names? For example, let's say you have these class names: window, window top, window top left, window top right. How do you name those class names (and such filenames)?

Currently I am doing the following:

.window {
 background: url(images/window.png);
}

.window-top {
 background: url(images/window-top.png);
}

.window-top-left {
 background: url(images/window-top-left.png);
}

What other ways are there?

Answer 1

From the class names, I assume this is CSS for some sort of widget or plugin. The names you have given are pretty clear but to help avoid clashes I'd probably prefix them with a short plugin/widget specific string ie:

.mywindow-window{
}

.mywindow-window-top{
}

.mywindow-window-top-left{
}

These names are a little verbose, but should help make things clearer in the long run.

If I'm mistaken, then the naming convention you are hinting at should be fine - whats most important is that you are consistent.