Using OOCSS with IE6

OOCSS is a very cool technique by which you use multiple classes on an element to apply functionality as well as quickly updating the design of a website or an application.

If you're one of the unlucky few who still has to support IE6 then most people tend to think that using OOCSS is a deal breaker. As any experienced developer will tell you that IE6 has major issues with chained classes, which is one of the pitfalls why developers do not use this technique. So how do we make OOCSS principles work in IE6, lets work with an example:

<div class="paging">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ul>
</div>

Then lets add some default styling

.paging {
    padding: 5px;
    background-color: #E6E6FA;
}
    .paging ul {
        min-height: 0; /* IE7 floats clear */
        _height: 0; /* IE6 floats clear */
    }
    .paging ul:after {
        content: ".";
        visibility: hidden;
        height: 0;
        display: block;
        clear: both;
    }
    .paging li {
        float: left;
        margin-right: 5px;
    }
        .paging li a {
            display: block;
            border: 1px solid #789;
            height: 20px;
            width: 20px;
            text-align: center;
            line-height: 20px;
        }

which should produce

If you needed to create another style of the paging, say one for a very narrow column, then you can simply tack on another class to the paging div like so.

<div class="paging pagingStyle1">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ul>
</div>

Doing this will allow you take advantage of the default styles (which is cheaper) and all you have to do is to overwrite the styles you need to achieve the final design.

The principle of OOCSS works best with chained classes in the markup and in an ideal world you would write a style like

.paging.pagingStyle1 {
    foo: bar;
}

However IE6 would see this as pagingStyle1. In order to make IE6 behave we'll not do that. Instead we will set the new styles using the pagingStyle1 class. Here's an example to illustrate:

.pagingStyle1 {
    width: 25px;
    background-color: #98fb98;
}
    .pagingStyle1 li {
        margin-bottom: 5px;
    }
        .pagingStyle1 li a {
            border-color: red;
        }

This would then produce the below as a result in all browsers including IE6.

So OOCSS is possible in IE6 but you just need to be a bit clever about the writing style.