Let me clarify the title.

So lets say you have a high traffic website with fairly large files (150kb +). What might represent the index page might actually have 10 "include / partials" files such as a header include, footer include, logged in status include, etc...

We are trying to determine the best approach to match code quality/readibility and site performance.

I am in a discussion right now with a co-worker on whether we should continue serving up the 2-3 css files (in the <head)) that represent the whole site. One of them being a global.css which touches elements used across the board, and another (for example) called account.css which touches elements when the account page is accessed.

The alternative being presented is placing the css that is directly related to code in these includes in the actual include files. An example is that we have some dropdowns that are only in affect when you are logged in, and they exist in their own "include". Would it be worth doing something like


<div......dropdown code goes here>....
30 lines later

<style type="text/css">
#element {blah blah}
Or should the styles stay in their external css file (like global.css or even account.css as examples).

My argument is that if they stay in the <head> they will get cached by the browser on the first load, whereas the other route is the styles get written into the page every time.

I know places like Yahoo actually write their css into the page (for their homepage) versus linking to it in external files.

Really, what it comes down to is what is the best practice in handling css and javascript when it comes to a large site with high traffic if you want to increase page load speed?