How to Effectively Clean Up Styles in a Large Web Site

How can I effectively clean up styles in a large web site?

Short of going through each .tpl file and searching the file for the selectors manually, I don't see any other way.

You could of course use Dust-Me selectors, but you'd still have to go through each page that uses the .tpl files (not each url as I know that many of them will be duplicates).

Sounds like a big job! I had to do it once before and I did exactly that, took me a week.

Another tool is a Firebug plugin called CSS Usage. As far as I read it can work across multiple pages but might break if used site-wide. Give it a go.

Triumph! Check out the Unused CSS online tool. Type your index url into the field and voila, a few minutees later a list of all the used selectors :) I know you want the unused ones, but then the only work is finding the unused ones in the file (ctrl+f) and removing them :)

Make sure to use the 2nd option, they'll email you the results of the crawl of your entire webpage. Might take up to half an hour, but that's far better than a week. Take some coffee :)

Just tested it, works a treat :)

How to clean style sheets mess?

Im not sure of a program that will go through all your files. but this one will do it one at a time

http://www.cleancss.com/ and http://www.lonniebest.com/FormatCSS/

CSS Best Practices for Large Scale Web Site

Avoid giving each page a body tag with a unique ID. Why? Because if a page needs to be styled uniquely, it should have its own stylesheet.

I will often have a main.css stylesheet, stylesheets for various similar portions of my website (like an administration.css for an admin section, assuming the pages in the admin section shared a similar look and feel), and then give certain unique pages their own stylesheets (like signup.css).

I then include the stylesheets in order from least-to-most specific, because if two otherwise-identical rules are encountered, the rule in the most "recently" included stylesheet will be used.

For example, if my main.css had:

a { color: red; }

... and for some reason, I wanted my signup page to have blue links:

a { color: blue; }

The second rule will overwrite the first if my signup.css were included after main.css.

<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="stylesheet" href="/stylesheets/signup.css">

What is the best method for tidying CSS?

You might want to encapsulate your css within a more formal CSS framework. You can create your own custom framework but there are some useful open source css frameworks such as yahoo's YUI and Blue Print CSS
http://www.blueprintcss.org/

The nice thing about this approach is that it leverages a lot of effort to fix the cross browser issues around fonts and layout.

Depending how far you go you may have to extensively touch the existing markup. Depending on how large your site is I would try to incrementally adjust styles and migrate them over to the formal CSS framework. Long term this will make the CSS more manageable and easily understood by other developers familiar with the concept of the framework.

Progressively try to eliminate redundant and unaccounted for styles.

I would also create a debug.css file. Take all the old style names and add an identifying style to them. For example:

.myoldstyle {border: solid 1px red};

Then you can detect where the old style is being used throughout the site. Each style should be accounted for and ported over to the new system. When a particular style in the old system has been correctly migrated to the new system you can remove (or better comment out) the identifying style from the debug.css file. You can be confident that you have migrated all the styles when the debug.css shows no side affects in the display output.

It can be a time consuming process but approaching it systematically can be helpful.

Also, you may want to start looking at your site with no css at all. Just get a sense of the logical and semantic markup of code. Having a clean HTML code base helps when debugging style quirks.

As for organization of CSS, I like to separate into basic categories: layout, typography, lookandfeel, navigation

Keep all color related information in the lookandfeel style sheet. This is where you will spend the most time trying to meet the client's visual tastes and desires. It is handy to keep that is a separate logical style sheet. The other stuff is more functional and standardized. Having this abstraction makes it much easier to isolate the visual effects of styles.

And one last tip, check out Firefox firebug plugin or Safari's debbugger. These can show you computed styles (the way styles and elements are ultimately derived as the various styles are applied) and you can tweak specific styles in real time on the fly it you want to explore the effects of a specific style change in a complex CSS system.

And most importantly, keep a separate ie.css file around. This should be the last style sheet referenced in your headers. If you need to do any workarounds for IE put them here. And only expose this style sheet to IE through conditional comments.

http://www.quirksmode.org/css/condcom.html

That is the fastest way to resolve IE 6 problems.

Organizing css for large sites

Just like any other type of code, if you are duplicating your CSS code all over the place, you are asking for trouble. Maintenance is going to get harder and harder for you as time goes on.

The best way to not have issues with a change on one page affecting other pages detrimentally is to have a style guide that drives your UI layout and design. If your style guide defintes the HTML and CSS classes to use for a given design element, then they will all always be displayed the same across all pages. If a specific page's element needs to be changed, you change the HTML to use a different class and then build new CSS for that class (and add it to your style guide for reuse). The style guide also allows you to make sure that your HTML is uniform across all developers working on the site, which means even less of a chance of CSS changes causing problems as you do more development.

Another point you need to remember with CSS is that every one of those .css files you create and reference on a page is an HTTP request. If every page and control has its own CSS file, you are really hurting your users' experience on the site by bogging down the total request download time for every single page request. It also makes it less likely for their browser to cache the .css files because the cache has a limited amount of space, so if you keep filling it with more and more .css files, they are going to get dumped from the cache more quickly. Yes, you can combine .css files programmatically in a handler so your page only makes one request per page, but then you have additional server overhead and the caching issue still remains (unless you have a single request for all .css files on your site, which defeats the purpose of what you're trying to do here anyways).