Choosing your CSS techniques

I’ve had so many interesting discussions with people at @media, as these were prompted by the topics discussed by panels or in presentations it’s probably not surprising that I was often having the same conversation a number of times with different people! However one topic that kept coming up was how we decide which methods to use when working with CSS.

At this point in time for most end results there are a few available paths. Take for example, the requirement to clear floated elements. The conventional and recommended way of doing this has, for some while now, been to add a redundant element underneath the floated elements. However, a recent technique for self-clearing floats, as detailed on Position is Everything, gives us a method to achieve this without adding the additional div to the mark-up. At first glance this seems like a preferable method, after all we have been banging on for years now about separating our presentation from our content and document structure haven’t we? However I’m not completely comfortable with this method yet.

The self clearing floats method requires that you add a bunch of hacks to your CSS to get this technique to work cross-browser. I’m very much of the school of thought that says hacks are a last resort, much of my CSS work is completely hack-free because I would rather look for an alternate way to achieve the same visual effect than resort to a CSS hack – where that is possible. I am not sure that peppering your CSS with hacks is preferable to adding one redundant element. The argument against this would be that adding ‘just one redundant div’ is starting you down the slippery slope of mixing your presentation with your document structure. However that extra div doesn’t have the same implications as using a bunch of nested tables does, for example. It’s a pretty benign element, it won’t create an accessibility issue when a user with a screenreader comes to the content for example. In an ideal world it wouldn’t be there, but I don’t inhabit this ideal world!

The above is just one example of a situation where we come across two different ways of achieving the same end visual result. For other techniques there are a number of methods, for example the range of methods for achieving rounded corners on boxes. When I come up against a particular ‘how do I create this in CSS’ issue I tend to look at the available options, which might involve some research if I haven’t completed this particular task before, or haven’t done so for a while and want to check for new techniques. With the range of methods I then have, some I discount immediately, either due to the constraints of the project, or the browsers that I have to support. With the rest – assuming I have a range of slightly sub-optimal ways to achieve the visual effect, some needing extra mark-up, others needing CSS hacks – I have to decide which does the least harm. Which will be easily maintainable? Which will my client understand when I hand the project back to them? Do any of these present any accessibility issues? The answer may be different depending on the context of the project, what I might choose for a personal project that I can dive in and fix if a new browser blows it all up is often different to what I would choose for work I am going to hand over to a client to implement themselves. Like so much that we do, there are no fixed answers, and I am constantly refining and developing my own skills and methods.

So, what do you do? How to you decide which method to use when faced with a bunch of ways to achieve the same end result? Are there any particular issues where you have found it difficult to decide which method to choose, or has a method you have chosen come back and bitten you afterwards?

[tags]atmedia, atmedia2006, css[/tags]


Damien June 18, 2006 Reply

I generally use my clearing elements for copyright data etc or for the ‘end of page’ nav duplication if used – therefore, the clearing element is no longer redundant – this is of course only in the situation of multi-column layouts using floats etc but can usually be applied somewhere along the line. Try thinking about how you can use your clearing elements rather than leave them empty.

Sean Fraser June 19, 2006 Reply

Wonderful article. It seems that I couldn’t lurk about forever.

I would for client sites say that most of my CSS hacks are the use of redundant elements, e.g., two floated divs wrapped in a third div. Between clients CSS knowledge level, CMS constraints, validation requirements and client-specified design, redundant elements are most effective.

I don’t understand the Semantic Temperance League when they state that extra divisions or extra spans lead one to structure rather than presentation. Or, since we have CSS3, one no longer requires extra spans for certain typography effects.

All complicated CSS hacks have come back and bitten me on client sites after project completion and I’ve gone away. That’s why I no longer use them, e.g., clearfix.

mearso June 20, 2006 Reply

I struggle to decide on a method, adn I think that part of that is that I leave myself in the dark about why and sometimes what method to achieve something I’m using.

After the @media presentation I’ve resolved to comment better, and I’m hoping that process will make my reasoning more transparent to me, never mind my co-workers.

btw I’ve done a little drawing of the presentation – It works as notes for me.

Seeing as I’ve drawn you rachel It’s rude not to let you know.

Managing CSS

Balakumar Muthu June 21, 2006 Reply

Good reading thank you :)!!

Balakumar Muthu

Sarah Reynolds June 21, 2006 Reply

Great article, and I think it is interesting to get other people ideas about how and why they choose to do things in a certain way.

Currently I’m with you in that I’d much rather add the extra div to clear the float, than hack my CSS.

One other place I have found conflicting methods is in supporting the min- and max- properties that IE doesn’t support. Currently I am using expressions but I have also tried the box hack method, javascript methods. I’d be interested in what thoughts people have on this issue.

Dustin Diaz June 26, 2006 Reply

I go with the method that isn’t too hackish, not too bulky, and not way overly complex. Most of the time “zoom:1” tends to fix my IE6 problems – and I don’t feel bad whatsoever for using it.

Blair Millen June 28, 2006 Reply

I’m with you in terms of avoiding CSS hacks. When I convert a Photoshop mockup into HTML and CSS I always keep the CSS very simple to ensure that the site works ok in IE6. And, like Simon Willison, I’d rather add in some redundant markup if it means the layout works across all browsers.

David Joseph July 21, 2006 Reply

Hack free is (almost) always the way I will go and in fact it is only my latest design when I exhausted every other avenue for a ‘fix’ that I had to add a condtional comment (still IMO) a hack, but that involved a peculier IE Bug I haven’t seen/couldn’t find documented involving ‘backwards Inheritance’. I have to say it broke my heart 🙁

Leave a Reply