Optimal CSS Coding

To get things started, the standards process itself must have a champion within an organization. At the outset it’s not always possible for the champion to devote full time to this role, but as standards become more and more important to the organization, it becomes increasingly important to the organization’s management team to put someone in charge of standards—a standards manager.

Depending on the size and reporting structure of an organization, it’s possible to have one person fulfill this role; however, I usually suggest a team of at least two people, even in the smallest organizations, for greater morale, workload balancing, and redundancy.

Putting together a standards-management team is especially necessary when managing standards for multiple disciplines (such as design and development). Having more than one person addressing standards allows each individual to focus on the standards that are most closely related to their area of expertise.

What’s standing in the way of success is timely updates, regular communication, and constant reinforcement, so what you need is a strategy for maintaining the standards, communicating them appropriately, and ensuring their correct use. And what if you don’t have any standards? You may have more inertia to overcomethan an organization that has something in place, but the same process will help you get in gear.

You may be skeptical, but I know from experience that change is possible. I saw it happen at AOL, where I worked on standards for five years. Its situation a few years ago may not be unlike yours today. AOL had some standards documented but they weren’t complete, nor were they regularly updated. There was somemanagement support for them, but that support was inconsistent. And there was little communication about the standards, which meant that only a fraction of the people were even aware of them. All of that changed, thanks to the Circle of Standards.

The bottom line is that the decision to use a framework should be a reasoned and thought-out decision, just like any other software choice. Frameworks are written by people, and despite the large numbers of testers and contributors, bugs do surface and they are difficult to troubleshoot due to the complex nature of their code bases. There are frequently workarounds, however, due to the vast number of ways the same tasks can be accomplished with these powerful tools. There are pros and cons, and sometimes the con of a large code base for a few simple effects is just not worth the extra bandwidth and downloads. Again, it is best to make a reasoned decision.

It’s obvious that modern JavaScript programming has come a long way from the simple tricks and copy-paste scripts of the 1990s. Today’s Web sites are being built with a keen attention to separation of content from presentation, and this separation is hobbled if the behavior layer of JavaScript is intermingled with the other front-end code. Scripts are becoming more mature, including Ajax and W3C DOM-based code as opposed to proprietary browser-specific code. Code can be isolated and reused in external files and even cleaned up using an independently tested and constantly evolving JavaScript framework.

In the end, however, a Web team should weigh the advantages of a scripting framework against its own site’s and team’s needs. This will determine the best approach—the one the team should stick with to avoid the inconsistencies of days past.

When a page has enough content and artwork combined with scripts, a traditional onload event handler delays the attaching of all scripts until the full document and all its assets, including graphics, have all loaded—which can introduce performance delays where it may appear to the user that nothing is happening, because the scripts have not fired yet.

A better idea is to attach all the dynamic behavior once the XHTML has loaded, because the document’s full DOM is what is needed, not all the graphics. Some industrious developers have figured out ways to attach scripts once the DOM has loaded (just the XHTML, which is much quicker than loading the full page). Try searching online for “domcontentloaded” or “domloaded” for more information.

Just like getElementsByClassName(), innerHTML is part of the WHATWG’s specifications offered to the W3C HTML Working Group. As with all its recommendations, only time will tell if it is standardized. In the case of our sample page, there is an object (a link in the original) that on mouseover shows a box that can be resized (for whatever reason), and the box changes its border color when clicked. This object will be inserted dynamically, as it is meaningless without scripts. TIP Because content is being inserted into the DOM of the document, this code needs to be placed before the code that was discussed above in the window. onload for the pop-up. This is because when DOM modifications happen, event handlers can be lost! There are ways around this; try searching online for “javascript event delegation” for some helpful links.