Distinguishing context dependent classes in CSS

This is more of a RFC. I have CSS classes that have rules assigned by themselves, like footer

.footer { border: 1px solid black; }

And then I have classes that only have rules assigned as descendants of other classes, like right

.footer .right { position: absolute; right: 0}
.menu .right { float: right }

And I want to be able to distinguish between them on the first look, so I know that I can use .right in a new context and I won't collide with already present CSS rules.

I thought of naming the context-independent classes capitalized (Footer) but that would mean most classes would be capitalized. Or prefixing the context-dependent classes with a dash, like -right. As far as my understanding of the standard goes, this is legal. Do browsers handle this OK?

What do you think would be best? Is this generally a good idea?

Update: The point is to distinguish two kind of classes.

• Kind 1 (e.g. foo) would possible have CSS rules applied to them .foo { ... }.

• Kind 2 (e.g. bar) would never have CSS rules applied to them, except as descendants of Kind 1 classes .foo开发者_StackOverflow .bar { ... } /* OK */, and never .bar { ... } /* WRONG */

The question then is: How would you recommend to distinguish classes of Kind 1 and Kind 2.

It might be easier to add some comments and indentations to your code. For instance

/* Main FOOTER style */
.footer { border: 1px solid black; }

    /* sub FOOTER styles */
    .footer .right { position: absolute; right: 0}
    .menu .right { float: right }

Of course, this may not work for you if you have a ton of styles. You would not want to bloat your stylesheet. But if readability is the main thing...

Also, you should try to avoid naming your styles according to what they do (e.g., .right) in case you want to change what they do (e.g., make them left) in the future.

Of course, it's a good idea!

I would use class="footer right" then use .footer.right, but some old browsers won't work with that though.

All browsers handle dashes perfectly. I actually use .footer and footer-right so you can use then like this way:

HTML

<div class="footer footer-right">...</div>

CSS

.footer { border : 1px solid #000}
.footer-right { position : absolute; right : 0}
.footer a { ... }
.footer-right a { ... }
.menu { ... }
.menu-right { float : right}