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]