When organizing files, I prefer to create a separate CSS file for each master page in order to maintain clarity and organization. Each master page usually corresponds to a specific section of a website, sometimes only one.

I reserve the addition of extra CSS files for instances where there is a distinct need. If certain elements are unique to a particular page and do not apply elsewhere, I include them within a style block directly on that page. This helps avoid unnecessary HTTP requests.

There are a couple of important points to consider:

First and foremost, it is advisable to have just one CSS file for your project. CSS serves the purpose of ensuring consistency in user interface design throughout your website and keeping these design specifications separate from the actual pages. This allows you to easily make global changes, such as adjusting the font for all "warning" labels on the site. If you find yourself wanting to customize a specific page, resist the urge and stick with an existing style (by using IDs or classes). Even if you absolutely need to create new styling, it is recommended to add it to the main CSS file with a unique identifier. Chances are, you may end up reusing this styling in the future across multiple files. Consolidating styles into a single file does not impact performance negatively; in fact, it can enhance performance by being downloaded only once and then cached. Having separate CSS files for each page will lead to more downloads and result in a heavier load.

Secondly, take the opportunity to explore the concept of "Themes" if you are working with ASP.NET. Themes allow you to define one CSS class for a particular site theme (e.g., "Blue") and effortlessly switch to a completely different appearance (e.g., "Green"). They also provide a convenient way to organize both CSS styles and associated images in a manner that offers flexibility. You can provide multiple alternate CSS files and directories for images to cater to customizing the visual aesthetics of your site effectively.

When creating different layouts, I make sure to use a dedicated CSS file for each one.

If a particular sub page features a unique layout or a subsection that is exclusive to that page alone, I assess whether the CSS rules are substantial enough to impact the main CSS file's size. If they are significant, I extract them into a separate file and link it only to that specific page.

My recommendation would be to have one global style sheet dedicated to screen formatting and another for print css. It's always a good practice to keep these styles separate. The approach you take may also depend on the variety of designs used throughout your site. For example, if you have vastly different layouts across different sections of your site, it might be more suitable to have a style sheet for each design. This could include a front-end design as well as a separate design for an administration area. Additionally, using Master Pages can help simplify the building process.

A big shout-out goes to the Yahoo Exceptional Performance website. This site is a treasure trove of valuable insights on front-end engineering challenges that can significantly impact page load times. From minimizing HTTP requests to optimizing CSS and JavaScript loading, it covers a wide range of topics aimed at boosting website performance.

While not directly related to your query, it's definitely worth keeping in mind when making decisions about handling CSS and similar elements in a new project.

When it comes to managing CSS for a project, the approach can vary depending on the specific requirements and future maintenance plans. In my experience working on extensive projects, I often encounter restrictions in changing the HTML template. As a result, I rely on precise control over the CSS styles.

My strategy involves using a combination of a global stylesheet, a template-specific stylesheet for defining overall layout structures like columns and reusable sections, and a page-specific stylesheet for customization unique to that particular page.

The key advantage of this method is the ability to define most of the styles at the global and template levels while still having the flexibility to override specific rules at the page level when needed. This allows for a more efficient way of managing CSS without the clutter of numerous unique names. It's akin to CSS polymorphism, where different pages can share similar elements but implement them differently.

One drawback is the maintenance of multiple stylesheets, but with proper documentation and naming conventions, this approach has proven effective for me. From my experience, consolidating all CSS into a single file for a large project can lead to overwhelming complexity.

When it comes to ASP.NET, utilizing Themes can be a game-changer. Personally, I organize my CSS files by ASP.NET theme for optimal efficiency. Each theme has its own set of .css files that are strategically divided based on their purpose:

• Main styles for overall page layout (primarily for master pages)
• Styles for standard HTML elements like paragraphs, links, headings, etc.
• Custom block-level styles for divs
• Unique inline styles specifically for spans
• Table-specific styles

I make sure to also include a separate .css file for each third-party component or control integrated into the site.

While this response may not directly address your specific question, it does provide valuable information on organizing style sheets. The article suggests using multiple stylesheets tailored for different platforms.

As a general rule, I recommend having a primary global stylesheet for layout and design, with additional stylesheets only if necessary. It's rare to find a situation where a separate CSS file for each page is required.

I highly recommend reading "Progressive Enhancement With CSS" from A List Apart
All web developers would benefit from taking a look at this insightful article.

Our website utilizes a unified style sheet that is globally implemented, with supplementary style sheets utilized on specific pages as needed. For example, grids.css is used for pages featuring grid layouts to avoid unnecessary clutter in the main stylesheet.