What are the advantages and disadvantages of CASCADE STYLE SHEETS?

Sabari · #1 (**permalink**) 09-12-2007, 01:33 PM

S.Vinothkumar · #2 (**permalink**) 09-14-2007, 03:10 PM

Advantages: you can control the design of the entire site much more easily. the design can also be programatically controlled (using javascript in combination with css). it allows for the abstraction of content from presentation without having to resort to server-side code, and pushes all of that processing down to the browser.

Disadvantage: it’s ‘easier’ to just code the design into the html.

KiruthikaSambandam · #3 (**permalink**) 12-01-2007, 04:12 AM

CSS Advantages

1. Separates content from presentation. What happens when you want to change the margins on all the pages of your site? If you use tables for layout, then you have to change every page. With CSS, just change the default style of the <body> tag. Instead of changing all pages, you only need to change one style sheet. Using CSS makes site-wide presentation changes a snap. That allows you to spend your time on page content and structure, not presentation.

2. Replaces frames. A fundamental Web design rule is frames are bad. They can help site navigation, but even in the best case problems remain: pages can't be bookmarked, and it's impossible to specify a set of frames as a link destination. CSS's ability to give elements a fixed or absolute position allow Web designers to do away with frames; the frame is now part of the page itself.
3.Graceful degradation. A site that uses CSS well will be just as usable on browsers that don't implement CSS as on those that do. The site might not appear the same, but all the important information will be present. This "graceful degradation" was built into CSS by its designers, and is an example of excellent design.

CSS Disadvantages

1. Fails as a frame replacement. While eliminating frames is a noble idea, it's a goal that has not yet been reached. As of this writing (2002-01-24), CSS is a failure as a replacement for frames, due to broken CSS implementations in recent browsers (Amaya 5.3, Internet Explorer 6.0, K-meleon 0.6, Netscape 6.1, Opera 6.0).

To be specific, try creating an element with a fixed position that includes a link to a named anchor. None of the browsers listed above followed the link & rendered the resulting page correctly; does your browser?

This problem should be remedied in time, but I suspect that CSS fails as a frame replacement for another reason. Consider a site with one navigation frame and one content frame. If I understand CSS correctly, the contents of the navigation frame must be replicated in each of the content pages. That can lead to a maintenance nightmare. The situation can be worse: consider a navigation frame that offers three alternative navigation pages, such as a table of contents, a subject index, and a search page. Must each content page have three different versions, one per navigation page? Yow! The headache of exponential potential!

2. A great power. Like any design tool, CSS requires practice and experience to use well. It offers great control over presentation; however, the more control a Web designer has over presentation, the more ways that designer has to make ugly and unusable documents. With great power comes great responsibility.

Consider the useful CSS Reference, 3rd edition at the House of Style. This edition is fine, but a previous edition used a style sheet that assigned the same background color to all header elements. This made it hard to distinguish headings from subheadings, since the primary visual cue (background color) made headers appear more similar, not less. (Here's a demonstration of the problem, and a non-CSS version of the same.) This is the kind of problem style sheets were supposed to solve, not exacerbate. If a company that makes its living from CSS could make such a simple CSS mistake, what hope is there for amateur proficiency?

3. CSS is not designed for horizontal layouts. CSS's page layout model is to fill the page from the top down, flowing additional content off the bottom of the visible page. This vertical bias has its drawbacks. It's not possible to make a multicolumn layout that scrolls new columns in from the side when needed. Also, unusual sites such as Scott McCloud's Daily Improv (a horizontally scrolling comic) have to rely on HTML tricks to achieve their layouts.

4. Hard to retrofit. It's possible to retrofit a site with CSS, but when you have a site with almost three hundred HTML files containing over eighty thousand elements, visions of CSS become nightmares of editing hell.

Using CSS pays off when it's a part of a site's design from the planning stage on. Retrofitting a site, on the other hand, can involve more than simply peppering pages with class="hot-quote" attributes. Converting a layout to CSS invariably requires adding new HTML elements (usually divs). So we're still mixing semantic and presentation markup, which CSS was intended to separate.

5. Makes downloading pages harder. If you want to save a copy of a Web page for offline viewing, you'll have to do more work if the page links to style sheets. To get the page as it's presented in your browser, you have to download not only the page's HTML and the style sheets it links to, but also all of the style sheets they import, and so on down the chain of @import statements. Determining style sheet dependencies is a task that, while simple, must currently be done manually.

6. Wastes time. Time spent twiddling style sheets is time not spent improving site content. How many people go to a site just to look at the pretty design? And what percent of those who do will have a reason to return? Content gives them a reason; design doesn't.

ThankQ
KiruthikaSambandam

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Advantages and Disadvantages of JQuery	npugila1983	HTML, CSS and Javascript Coding Techniques	1	01-02-2008 07:10 AM
crypt advantages and disadvantages in php	$enthil	PHP Programming	3	12-17-2007 10:28 PM
What are the advantages and disadvantages of scripted testing?	devarajan.v	Testing Tools	1	11-13-2007 06:32 AM
What is the difference between global and action sheets within the data table in QTP?	sundarraja	Testing Tools	1	08-13-2007 11:50 PM
How many external style sheets is too many?	muthukumar	HTML, CSS and Javascript Coding Techniques	0	07-17-2007 12:19 PM