I always try to keep the browser from having to load and interpret CSS rules and JS code that isn't used on the HTML in question. I agree with @bobince that you should only break a page's styles and scripts into a separate file if it's necessary for organization, but if your site is very big at all, you will reach that point.
However since I only build template based sites, I am beginning to wonder why I link to external files at all. For example, if I have a base template the things I put in the head of that template will be applied to all the pages on my site. So why not just put my styles and scripts there?
Two reasons come to mind. First the browser can cache the external file and reuse it on every page that includes it without having to load it all over again. Second designers might not be as comfortable poking around in your templates as they are messing with plain CSS files.
That's all well and good for global styles that apply to every single page in your site, but what about those one-off pages that have some style that isn't shared anywhere else? If you added this style to a globally applied external file you'd increase the initial load time of your site just to have a style that is only used on one page. Further, when you go back to that file months later you will likely have forgotten what those rules were even for.
I suggest that any style rule that is not expressed on every single page should be placed in
