In my opinion, maintaining CSS can be quite challenging. If CSS were a space in your home, it would resemble the basement...accumulating various items over time and becoming cluttered with things you no longer need.

Therefore, I suggest considering a fresh start every couple of years.

If starting anew is not feasible, here are some recommendations:

• Organize CSS development files into separate entities for easier management. Utilize a minimizer tool to condense and merge these files into one during deployment.
• Explore OOCSS (Object Oriented CSS) methodologies. Implementing this approach in websites with extensive developer teams can enhance reusability by introducing more class names in HTML that can be applied consistently throughout the site, resulting in streamlined CSS files.
• Establish component libraries to avoid creating unique CSS for each page. Instead, focus on employing reusable code and design patterns across the entire website.

Our development team utilizes Rails and adheres to a specific architecture that we follow closely. You can find more information about our architecture guidelines at this link.

It's important to note that depending on the framework you are using, there may be some necessary adjustments to the logic.

Here is a brief overview of our architecture:

Within rails, we use a method to assign a common ID to a group of pages. For example, all user management-related pages might have the id: body#users-registration. Similarly, pages related to reporting services could have the id: body#reporting-services.

We maintain a common.css file that contains universal styles that can be applied site-wide, such as layout styles, lists, paragraphs, and panels.

In addition to the common.css file, we also have separate CSS files for each group of pages, like users-registration.css and reporting-services.css. These files contain styles specific to the corresponding page groups, helping us prevent conflicts across different pages.

Before deploying to production, we combine all CSS files into a single file to streamline loading times.

In my experience, I have discovered that commenting on CSS and targeting HTML tags rather than specific classes or selectors has led to a significant reduction in code and has made it much easier to read later on. When I need to isolate a JavaScript event, I simply wrap that component in an id and add comments to the base CSS file accordingly.

reset.css
fonts.css
main.css

main.css
    /*
    ** Styling for Image Slider on products.php
    */
    #slider_products {...}
    #slider_products #slide_container {...}
    #slider_products h1, p {...}
    #slider_products img {...}

If you are using an IDE (such as NetBeans), these comments can be visible (and you can also include as much descriptive text as needed)

I have managed CSS files for websites with over 200 pages of content, as well as sites with only 20 pages. In both cases, my CSS files have never reached the excessive length of 1200 lines of code like I have seen in a friend's portfolio site (no names mentioned :-)), despite his site having only about 20-30 pages - all sharing the same design and style. It seems clear that by properly reviewing the CSS and code, those 1200 lines could be greatly reduced in no time.

Here are some strategies you can implement.

1. Organize your CSS code in your stylesheet according to the page structure. Start with header styles, followed by main content styles, and end with footer styles. Any additional styles for specific elements should come after that.

2. Utilize comments within your stylesheets to label sections, such as

   /* ### Styles for Links in Main Content #### */

3. If your CSS file is extensive, consider using separate stylesheets for different sections of your website. This helps manage style modifications efficiently. Each section can have its own stylesheet referenced only when needed.

4. Make efficient use of cascading styles and aim to minimize redundant CSS. For a practical example, check out this resource:

There are some interesting approaches I've come across when it comes to organizing CSS for the interface. Some systems use reusable class names, but also provide a detailed breakdown of the classes for reusability purposes. They tend to use descriptive selector names for components and individual features, although these are often not well-documented, coming from 3rd-party sources.

Overall, this method seems to work quite effectively. If a redesign is needed in the future, adjusting the interface CSS and documentation may be challenging but manageable, while leaving component styling to external providers or developers who create the components.

It's important not to rely solely on CSS documentation to avoid minification. Even if it's not done automatically, manually minifying your CSS is crucial. However, be cautious as excessive and unstructured CSS can lead to unexpected results after minification, depending on the settings applied.

UPDATE:

Exciting news from the Google+ feed - Jonathan Snook is working on something related to our discussion. Here's a temporary link to stay updated: