One simple way to figure out the correct way to create a CSS hierarchy is to avoid using physical descriptions entirely in your tags, and focus on "content" des

One simple way to figure out the correct way to create a CSS hierarchy is to avoid using physical descriptions entirely in your tags, and focus on "content" descriptions. Your classes should not ever be called "green", "absolute", "underlined", "float-right" etc. They should be called "main-menu", "primary-container" etc. This carries over into using javascript to control the look of the page: your styles that will be swapped should be called the state of the object, not the physical change (ie: call it "active" not "enlarged"). This may seem trivial/obvious, but if you are working on a large site, or a front end intensive site, it's pretty important and there is a lot of this, even in otherwise clean codebases. If you create lots of subclasses (like "absolute", "red" etc.) you tend to couple the styling of the page with the content in a really messy way (if you go to update the styles of this page you will have to do a lot of html editing as well, which defeats the purpose of external CSS).