Now. To use the tree you simply need to give the path to the node certain code is affecting. In the CSS you write: “#root #navigation ul li a.selected” and you’ll know exactly what your code is affecting (see my article on CSS strucutring). I have not yet tried it with javascript but I guess you could just use nested closures or a simple comment before your functions that give a path. What’s important is that you base your structuring on the tree.

Thing is, when you split up your file, you do it by components, or if you want bigger parts, subtrees. For me, it has worked great.

The component tree is great visual documentation too, making it much easier for the next person to understand what your code is doing…

Great post. Funny you bring that subject up, I’ve been dealing with similar issues again quite recently

While clear design patterns have been established for server-side code, client-side development is still too often thought of as scripting. What worked with a single CSS page clearly doesn’t in the type of situation you describe.

One of the key - for me - to this issue has been, quite surprisingly, to use a microformats-like approach.

By using classes to actually describe the data, rather than to think of classes as hooks for your CSS, one of your major separation concern is dealt with.

So for example, rather than adding a context-menu behavior to all elements whose class name is “context-menu”, you add that behavior to all elements who you know need a context menu. This could be for example, all images with a class of “editable”, along with all divs with a class of “help-section”.

In a sense, your actually considering your HTML/XHTML for what it is: data.

Regarding CSS, I’m a strong advocate of “namespacing” it, along with using a reset.css file like the one found in YUI. What I mean by that is to make sure that your CSS rules are always contained within the namespace provided by an id and that you target the element’s you want to style precisely:

#navigation li.current a { color: #333; }

rather than:

.current a { color: #333; }

This will save you a lot of trouble down the road.