The beauty of minimal CSS and code

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."

Antoine de Saint-Exupery

Whilst the literary world of Antoine de Saint-Exupery is a million miles away from web pages, standards and techniques the cadence expressed in the above quote holds as true in web page design today as it did for Antoine back in the early 20th century. Too often there is bad code and bloat that makes websites ineffective, hard to maintain and buggy; this article attempts to explain how we can move beyond this level of coding and to turn HTML and CSS into a thing of beauty.

What is the minimum?

Each different website will have its own unique requirements, as with each piece of information will have its optimum visual layout and semantic construction; when building with minimalism in mind the technique is to use no more semantically correct elements (tags), and CSS rules than are required to achieve the desired result.

We jumped through a few pieces of jargon there; elements are the correct name for HTML tags, each element within HTML has a specific purpose and many have a particular meaning outside of display that has semantic relevance e.g. <em> - emphasis, <strong> - stronger emphasis, <li> - list item, <h1> - main page header which can be interpreted by different user agents (browsers, spiders, etc.), to infer additional meaning to the content. CSS rules are both the selectors (how to refer to sections of your HTML document), and style choices that combine to restyle your HTML page from the browser default styles.

What are the benefits?

The immediate benefit of minimalism that springs to mind is that of less code to write; this infers:

• Less work to put together
• Less to go wrong
• Less to maintain

Of course with less code there is also less to download and fewer rules for your browser to parse to display the HTML. Of course with less to go wrong it is also easier to handle cross browser incompatibilities.

So why isn't this done more?

There are plenty of reasons, knowledge and skill levels play their part; habit has its part to play as well (after all there are still large web companies still using tables based layouts!), and there is still a fear of CSS support across different browsers that encourages designers to over complicate. Knowledge, skill levels and habit are perhaps the easiest to overcome with the amount of resources available; the tail end of this article attempts to provide one more resource with some scenarios and examples that can be adapted on your own websites.

Fear of browser support is somewhat more complicated and is fed from years of bad CSS support and rendering implementations in early browsers. The following mainstream browsers had an acceptable level of CSS support from the following versions:

• Internet Explorer version 6 (PC)
• Opera version 5
• Firefox version 2
• Safari version 1
• Chrome version 1

Taking a brief glance across the statistics for the Red Ant site and those of some of our clients shows that these browsers (or later versions), account for more than 99.8% of all traffic with the remaining 0.2% accounted for by non-mainstream browsers rather than legacy versions.

Is it still reasonable to be fearful of using these technologies in website design?

This blog post was written by Fitz

If you would like to discuss this post why not follow us on twitter?