Code placement

Good coding practice should always be adhered to, whether designing with the YUI or not. Keeping your JavaScript and CSS code in separate files helps to minimize the initial size of the page so it shows up earlier and also increases the chances of finding the external, common files in the cache. But it does have its downsides too; every file that your page links to adds another HTTP request to the interaction between your visitor and your server, which can result in slower performance. However, as they change far less than the HTML page that uses them, repeated visitors are more likely to have them in their caches.

In real-world implementations, we would always keep as much of our JavaScript and CSS in separate files as possible, keeping a clear distinction between content, behavior, and presentation layers. For the purpose of this book, however, we will be keeping the HTML and JavaScript code in one file. I stress that this is not the correct way to do things and is done purely so that the examples do not become bloated with numerous files.