Best approach to use custom skins & embedded skins together

Hi,

So I am upgrading the UI of an old product that has a combination of Webcontrols and Web.UI controls. I plan to bring the older controls up to date but need to keep support and CSS for the older controls in place. 
The older controls use a combination of skins and lots of bad css. 
I will be using theme builder to create a custom skin and using lightweight rendering and EnableEmbeddedSkins="False" for new controls. 
I have done one control so far and I am getting issues with the embedded skins overwriting my new skin using the WebResources.axd
I know I can use important to override but that's a very bad approach, especially on a large project... Is there a good approach to increase the specificity for the new skin files so all their properties are applied over the existing base properties where applicable.
I was thinking of using an ID to prefix all new skin selectors with and wrapping each updated control  in a div of that id.. not 100% this is a good approach though.
eg..
#newControls .RadGrid_MyMetro{ ... }

and then give updated controls a div wrapped around it with ID="newControls" or something like that.
1. will this work throughout the project
2. Are there better approaches?

Thanks