Complex CSS issue.

I am currently working on a site that is Based on PHP and is using smartys. It is designed to be completely modular. Parts will be completely interchangeable. There are around 50 different parts. Each one is a .tpl.

Sense there are so many different parts that have almost as many different looks I need to define them all as IDs in the CSS. Thus making each section quickly and easily editable.

I have a core CSS file that defines the basic setting to the site. Some of the most common sections/IDs are defined in that CSS as well. The problem is, I would like to separate out the different IDs into separate CSS files that will be located in a CSS directory. My reason for wanting to do this is that for quick loading. I only want the "needed" files to load.

Here is the question...
I know that the CSS files need to be defined in the head of the page itself. I want to make it so that if a specific .tpl file is called upon that it will load the corresponding CSS file for that section. Is there a way to do this. I have thought of some options but nothing that I like.

I know that you must be thinking.. Why dont you just put it all in one CSS file and leave it at that. Here is my answer: The CORE CSS file is only half complete and it is quite large. I think that that is a bit excessive and am trying to keep the load time down. The second reason is that I want to make it VERY easy to edit each sections CSS/looks. If you know what section you want to change you find that files CSS and edit it directly (no searching) and your done.

Just so you know the project is a POS/Inventory management system for motorcycle shops.

Thanks