If you do front end development with Drupal, you are certainly aware of the many classes that Drupal applies to elements. All blocks have at least one class that contains the word 'block' and views include many class names with the word 'view' attached. You can take advantage of CSS class chaining to differentiate your styles depending on what area of the page they appear.
Class chaining is two or more classes connected together without a space, such as .class-one.class-two or similar. If there is an element that has both of those classes that selector will override any other single named class that may be in your stylesheet. Lets take a look at a typical example of an elements classes that was generated by views.
<div class="view view-viewname view-id-viewname view-display-id-page_1 view-dom-id-1>
This element appears in the main content area of your page, but you may have a block in a sidebar that is created with the same view. And it will typically look something like this:
<div class="view view-viewname view-id-viewname view-display-id-block_1 view-dom-id-2">
Notice that the block view includes classnames that include the word 'block', now you can chain these classes together to make the same view style differently depending on the area of the page with code similar to this:
.view-viewname.view-display-id-page_1 li {float: left;}
.view-viewname.view-display-id-block_1 li {float: none;}
The IE6 Problem
Of course, there is a problem with browser compatibility with IE 6. IE 6 will apply the last class in the chain without regard to the previous classes. But you can also use this to your advantage to apply browser specific styles without using a conditional stylesheet. Just make your selector with the chained classes like you normally would and then apply an IE 6 specific style immediately after the chained selector. Since IE 6 doesn't recognize the chaining, the chained selector will have the same specificity as a selector that has only one class name. As long as your override style is lower in the cascade, IE 6 will pick that up while all other browsers will use the chained class. Here is a typical body class from a blog page:
<body class="not-front logged-in page-node node-type-blog no-sidebars tableHeader-processed">
Looking at this, we could use the page-node and node-type-blog classes chained and then use one of those classes by itself for your IE6 fall back. Just add the rest of the descender to target the element you want to style after the body class you're using.
.page-node.node-type-blog div#example {background: orange;}
.node-type-blog div#example {background: yellow;}
If you're viewing this page in IE6, it will have a yellow background, all other browsers will have an orange background.
Class chaining is a good tool for front end Drupal work, but make sure you have fall backs if your clients depend on legacy browser support.
What front end tricks have you discovered that help you in your day to day Drupal work?
Photo Credit 
