CSS Vs. No CSS in Website Development

Wed, Feb 4, 2009, by clickforseo

Web Design

With appropriate separation of content and presentation the HTML code for content structure could be only a small percentage of the code required if style information was to be mixed with the HTML code. Considering that one CSS may be driving multiple pages, the savings are substantial. Many organizations prefer to get the CSS developed by a central group to maintain uniformity of style. That way all developers need to become equally skilled on the CSS nitty-gritty. That reduces the risk of uniformity and the risk of mistakes.

The reason cascading style sheets were created was to separate the content from its presentation. Why that might be needed is that with the proliferation of devices that may make content available to you, you do not want to be burdened with the nuts and bolts of different presentation mechanisms on these different devices.

While life was comparatively simpler earlier with the computer monitor and the printer being the two principal presentation items, things have gone on a big growth since then. You have Braille devices, a whole range of mobile devices that need to be considered. Then you have the newest kids on the block the MID’s.

As it happened when mobile devices came on the scene, attempts were made to create yet another version of the content that suits these devices. When you have diverse set of devices content creation can become tedious very fast. Separating out presentation specifications then certainly make sense while the content is created and structured just once.

When this same style sheet defines the presentation of all the web pages of a site the savings could be substantial. Besides if changes are needed, changing just a style sheet rather than tens/ hundreds or even a thousand pages is easier and avoids the risk of messing up many of them. Using CSS obviously has benefits. Yet in practical terms it has some major downsides too. This article takes a look at arguments for and against using CSS for web page designs.

Arguments In Favor Of Using A CSS

With appropriate separation of content and presentation the HTML code for content structure could be only a small percentage of the code required if style information was to be mixed with the HTML code. Considering that one CSS may be driving multiple pages, the savings are substantial. Many organizations prefer to get the CSS developed by a central group to maintain uniformity of style.

That way all developers need to become equally skilled on the CSS nitty-gritty. That reduces the risk of uniformity and the risk of mistakes.

An immediate benefit of significantly smaller code size is directly proportional to the page load time. The load time is easily a few orders faster. Even when the time is better by a few milliseconds, it can still mean the difference between holding a few finicky visitors at your web site a little longer. Further benefit to the development effort is quicker turn around on changes as well as re-designs.

Redesigns, as we all know, do happen all the time. Being based on the top level style design the overall look and feel, a kind of visual branding, is easy to maintain. That makes the redesigns and modifications easier and less costly. It is easier to maintain too.

Those factors have a direct impact on development costs. On operating costs too the smaller page download sizes have a favorable impact. Very often the hosting services providers charge you on the download bandwidth used. Even if the page code sizes are half of what it would be with presentation embedded or the so called table based formatting, it’d mean the use of only half the bandwidth. With multiple pages that becomes a serious cost consideration. Benefits are the most when external CSS is used.

CSS based designs are easier on search engine optimization too as headers etc used for indexing are clearly identified. Font tags, as used in table based designs, does not make that apparent even if the headers may have larger fonts for example.

Arguments In Favor Of NOT Using A CSS

If you needed a perfect fit of your content display to the display media, the NO CSS is the way to go. You are able to tweak things down to a pixel on the display face. There are quite a few issues that cannot be handled by the CSS based approach.

CSS adoption has not been quick enough. Different browsers may not work exactly the same way with CSS. Some may not have features implemented properly. So there’s an issue of compatibility. You need to ensure your web pages work with most of the browsers.

From about 2000 browsers started adopting the CSS features. Yet, the implementations had errors, inconsistencies, bugs and other problems. The current specification is CSS2 and yet as of July 2008 no production release version of browsers had completely implemented CSS 2.0. Meanwhile the specs have been enhanced to CSS 2.1.

Because of these issues many a developers use CSS hacks and CSS filters. This too can add to the development time. While CSS hacks try to use rendering flaws of some of the browsers, it can lead to problems when upgraded/updated browser versions come along and render these hacks problematic.

Filters on the other hand are conditional application of CSS depending on the browser. This too can lead to similar problems as mentions with hacks. Besides, these hacks and work around tricks can be difficult for maintenance guys to track down and correct. That would add to maintenance and update time and cost.

Take the number of browsers and the devices you want to address and you have a large number of combinatorial situations you need to test the pages in. That is a huge testing time and cost you need to take into account in case of CSS based development situations. There are other issues that affect development time and cost.

While horizontal element placements can be specified easily, the controls available for vertical placement are counter-intuitive and very difficult quite often. There are overlaps in much functionality, only rectangular shapes are available, only one image as background, float management are some such constraints. Lack of expressions for specifying properties of elements, lack of variable definition capabilities or even lack of specifying columns in a straightforward manner are issues that lead developers to resort to hacks.

Overall View

Overall the CSS is the logically the ideal way to do things. Unfortunately the implements are not perfect. Even the specifications are evolving while implementations have unintended flaws. Overall leads to a large testing time to ensure compatibility.

NO CSS lets you make the most optimized sites for a given browser and a given medium-like the best productions are handcrafted in other spheres.

So what is best? There are no black and whites. The answer is in the grays, it depends on the exact developments required.

1
Liked it

2 Comments For This Post

  1. Web Design Says:

    Nice and very Informative Article Thanks For Sharing Info.

  2. Matt Hall Says:

    Nice article, thanks! :-D

Leave a Reply