Solving the CSS problem

So suppose you create a sophisticated PHP-Library to create webinterfaces.
You create classes to generate HTML-code. For example one class to create a tabbed interface in your webinterface. At this point your PHP-Library must include some css code to style the tabs.
Now you build a webinterface based on your library. And since you develop the webinterface for a certain customer, you have to modify the look of the interface. This means you have to change one of the CSS-files of your library. So you copy the CSS-file to you local webinterface and change colors and background-images to your liking. At this point you have a problem: If the library changes, and the original CSS-file of the tabbar implementation changes also, you have to manually correct your copied version of that file. I don't have to tell any developer hat this is kind of ugly... :-)

So here comes my solution:
You keep the CSS-files of your library in the directory of your library-installation. If you as a user of the library want to change some of the CSS, you create a new CSS-file and place in it your definitions you want to overwrite from the original file. Then you create a php script which loads your css files. It takes the original CSS-file and your modified version and appends it to one big file. This file is then processed with CSSTidy and the changes are merged in to single definitions and then sent to the browser. Need an example? Here you go:

Suppose you have the following CSS-file which is part of your library:

div.tab
{
  background-image:url('images/tabbackground.png');
  width:120px;
  height:16px;
}

Now you want to customize that. You have your own image which has a different width, but the same height.
You create your own file containing the following:

div.tab
{
  background-image:url('images/mytabbackground.png');
  width:98px;
}

Normally you would now send the concatenated content to the browser and let the browser handle the overwritten properties. The problem is, this costs you bandwidth and processing power on the client side. With my solution and CSSTidy the resulting CSS-code looks like this:

div.tab
{
  background-image:url('images/mytabbackground.png');
  width:98px;
  height:16px;
}

So you only overwrite the changes you need. If the original css changes, and for example adds a border statement, it gets automatically propagated through to the browser. This way you may update your library as you wish, the changes get automatically visible in your webinterfaces that use the library.