I have one main external stylesheet made of about 450 lines css. Although this clearly won't be enough for the other pages. These will have varying column widths, number of columns, background gifs, list styles, and more.
Am debating how much of value there is in caching of a single stylesheet (reviewed the sticky)
Am considering instead of adding another external style sheet - adding the most varying declarations within the page header (not inline) with the !important inherit, such as for width attributes and others.
Although if this is not of real value, I'll do these varying elements on one sheet aside from the common ones on another, or add to the 450 liner already in existence.
Mainly with the benefit of caching in mind, how to know when: one stylesheet or two is optimal, weighing also the page header css expression?
Most profile applications place higher weight on limiting request than decreasing the size of files by separating them. Many times in a production environment you will want to compress assets into a single request ie. css and js. Its not always possible or practical with open source libraries and third party products such as; Google Maps but having one file for all css in the head and another for all js at the end of the body is the ideal and in mostly all cases optimal. Separating normally is recommended when you have completely separate sites within a site such as an admin and front end. If the admin area is completely different then the public facing interface then it would make sense to separate the styles one for the admin and front-end and request only as necessary. Besides including separate assets based on a set of rules is likely to become a management nightmare.