Section E. Comparison


E. Comparison

Now that we have studied all four CSS-modification methods, we can ask ourselves which one is the best. The document.write method should be used only in specialized accessibility-related cases. Changing an entire style sheet is rarely useful. Therefore two methods remain. Should you use the style property, or change class or id values?

To get some answers, let's take a look at the example scripts. Site Survey doesn't modify CSS at all, Edit Style Sheet changes the entire style sheet, and Usable Forms uses the document.write method. Only XMLHTTP Speed Meter changes style properties, while four scriptsTextarea Maxlength, Sandwich Picker, Form Validation, and Dropdown Menuuse class changes. As you might guess, I feel the class change is usually the superior CSS-modification technique.

In my opinion, excessive reliance on the style property violates the separation of presentation and behavior, and besides it's more complicated to code. Styles belong in the CSS presentation layertheir natural habitatnot in either the HTML structural layer or the JavaScript behavior layer.

When you change a style, you are saying, "Give this element a new presentation." Giving this command is obviously a job for JavaScript. However, defining the new presentation is a job for CSS. The new styles of the element, as well as the old ones, should therefore be defined in the CSS file.

Thus presentation and behavior remain separate: JavaScript gives the command to change styles, but it's up to the CSS to define the new styles.

Example

Let's take a look at a practical example. Suppose I'd used the style property instead of a class change in Form Validation:

[Form Validation, lines 105-6 and 119-120, changed]

function writeError(obj,message) {     obj.style.border = '1px solid #cc0000'; function removeError() {     this.style.border = ''; 


Of course this works fine. But suppose later on the graphic designer decides the text also has to become red. You'd have to add two lines to your script:

function writeError(obj,message) {     obj.style.border = '1px solid #cc0000';     obj.style.color = '#cc0000'; function removeError() {     this.style.border = '';     this.style.color = ''; 


And so on. Each extra style for form fields with errors would take two lines of JavaScript. In contrast, a class-change script is easier to maintain, since an extra style requires only one line of CSS.

Of course, adding two lines of JavaScript hardly counts as complex programming. Nonetheless, implementing these changes would still require someone who knows his way in the JavaScript code. A graphic designer/CSS wizard without any JavaScript experience would not be able to do it.

CSS developers who know nothing about JavaScript are able to edit a style sheet, and this is not an inconsiderable advantage in a larger company, where people tend to have more specialized jobs. As a JavaScript developer, you don't want every tiny style change to have to go through you. Therefore, decreasing the complexity of the JavaScript layer is to your own advantage, too.

So there are a few reasons why I believe that in general a class change is superior to a style property change. Nonetheless, like any good general rule, this one has exceptions. The two most important ones are simple show/hide scripts and animations.



ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ISBN: N/A
EAN: N/A
Year: 2005
Pages: 116

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net