Environmental Style
Every so often someone will ask about how they should structure their CSS files. The answer, of course, is that as long as it validates, there is no right or wrong way. The truth of that statement belies the fact that CSS files really need to be readable and understandable by humans, not just machines. And there are some issues with the way the cascade is set up that can change the way you might expect your styles to work, and how things actually play out once rendered in a browser.
What I do
Without suggesting a dogmatic way of setting up your style sheets, I want to present a technique that works for me. This technique is closely tied with the way you mark up the HTML documents that are paired with the style sheets.
I call it Environmental Style. Not because it is somehow more "green" than other techniques, but because it is based on styling elements within a given environment on a page.
Breaking it down
As I begin to design my page I think about how each part works together to form a greater whole, but also how elements within each part (or each environment) will work. For example, a basic page typically contains a Header, some Navigation, the Main Content of the page, and a Footer.
The Header could be further broken down into a heading or title, some sort of attribution (like a masthead), and some breadcrumbing.
The Navigation is typically, and most basically, a list of links.
The Main Content is what the visitor is there to see, and comprises the largest part of the page.
The footer may contain contact information, last modified dates, copyright information, disclaimers, and other legalese. This is often boiler plate for an entire site.
So far I've defined four or five main sections of a page. Each of these sections might also contain subsections that would need to be defined.
Once I understand what sections and subsections I need, I define them as DIVs with specific IDs. For example:
#header #navigation #content #footer
Descendant Selectors
Now, you may want links to behave a certain way in the Main Content environment, and a different way in the Navigation environment. This can be accomplished by using something called a Descendant Selector. What this means is we are defining rules for elements based on it appearing inside of one of these environments. Here is an example using links.
#navigation a:link, #navigation a:visited {
color: red;
text-decoration: none;
font-weight: bold;
}
#navigation a:hover {
color: blue;
text-decoration: underline;
}
#navigation a:active {
background-color: #ccc;
}
The space between the #navigation and the link pseudoclasses is the descendant selector. It means that any anchor (A) that is a descendant of the #navigation element should behave according to the rules above (bold, no underline except on hover, and a light gray background when it is clicked).
Only links within #navigation will have those behaviors. Links in other DIVs will display the default behavior, or whatever has been assigned to them.
Hot and cold
Descendant selectors can be nested more than two deep. This allows for some very specific behavior patterns to be set up.
#navigation .hot li a:link {color: red;}
#navigation .cool li a:link {color: blue;}
Benefits
In your HTML you might have a list of "hot" links that are of current importance. As these links become less relevant, they might move to a "cool" section of the #navigation environment. Simply cutting and pasting the link from the .hot container to the .cool container (likely to be DIVs), makes the link change from red to blue.
If we had assigned classes to these links, we would not only have to move the links in the HTML, but also remember to change their class names. Once set up, these environmental styles make things much easier to maintain.
Another example might be that you have a link in the #content DIV that you also want to include in the #navigation. Again a simple copy and paste will make the link behave the way it should in both environments, but without changing any of the markup in the HTML.
More than links
This works for more than just links. Say you have lists in #navigation and lists in #content. In #navigation you might want to limit their padding and margins, forcing them to the left side of the DIV. In the #content environment you want the list to behave normally.
Using the same technique you can force lists to behave differently based on the environment they are in, without having to worry about it in the markup. And you also save yourself from creating lots of special case classes that are applied to individual elements in the HTML. There may be times when that is appropriate, but using the environmental style technique usually ends up saving time and lost hair from trying to remember what and where the CSS is that created that little effect that your client now finds annoying (or wants to apply more globally).
Powerful and practical
This technique is much more powerful than the simple examples I have given here. And, unlike most of the other selectors (child: > and adjacent sibling: + come immediately to mind), descendant selectors work in all version 4 and greater browsers from Netscape to Internet Explorer.