As the question appears mainly to be about the CSS for a web site/application, I'll cover the basic ways I would look at the problem.
The following is a rule of thumb, there will always be exceptions - but not majorly.
CSS is used to style a website - not individual web pages.
The worst websites viewed will be those where every page is laid out, sized, or coloured differently from the rest...
There should be a standard style for all of the pages contained in a website.
Saying that, not all pages will be laid out the same, so the design should start with identifying the layouts you will need:
Master pages, navigation, asides, footer etc.
There may be several layouts you will use, but not one for every page.
The content in these layouts will change, but that does not require individual style sheets.
Next, there is the individual styling for the headings, labels, input controls, divs, spans, tables, etc. that should be standard across areas of the site according to the area the user is visiting. An admin area may be laid out differently to a registration area, and their control sizes and colours may differ too if really required.
Styles should be set against the individual controls as a base - all divs, tables, textboxes etc. with standard padding, margins, colours etc.
Then you can define classes to apply to controls where needed; this way if you need to fix or alter the way divs are displayed for example, you only have to alter the style in one place - all divs using that class will change accordingly.
If you need a particular page to display differently to the standard styling, there is nothing wrong with placing the replacement style on the page itself - because it is particular to that page only and not used anywhere else. This is only applicable when the page is the only one with difference. If it is used elsewhere, and you need to change it, you will have to hunt down all pages that had this same difference and alter them all individually - not a nice task.
If you will need to load partials into another page, it should normally be styled the same as the rest of the page. However, if you need it to be different (but standardised because there are many partials that are styled similarly), then go ahead and create a style sheet for their use and place a link to the stylesheet in the partial.
Because CSS (Cascading Style Sheets) cascade, the last style declared will override all other styles declared previously.
So if a style was declared for a class named 'important' defining bold and red for the font, you could declare 'important' again for a partial where it only defined blue as the colour. The original bold would still apply but the colour would be overridden by the new blue definition.
So basic structure is:
- Main style sheet for all of the website's pages
- Overriding style sheets for particular areas
- Overriding individual styles for pages (either a style sheet or on the page itself)
Regarding your Content folder: style sheets should be created and named according to the style they are supplying - not for the view or page that they will be used in.
- Javascript files should be placed in the 'scripts' and should be named according to the functions contained within - not the view or page they will be used in.
- Icons and other images should be placed in the 'images' folder and should be grouped according to what the images are - not where they will be used (unless there are many images for each area in the website, then you could group them again under a name for the area).
Basically, try to shift the focus from 'this stylesheet is for a page' to 'this page uses this stylesheet' and keep the stylesheets to a minimum.