You can use CAC(Context-aware Configuration). Save the main clientlib category as CAC and based on site/path you can configure and set a different values. In headerlibs and footerlibs html file read clientlibs category from CAC.
Only caveat I would add is that - you standardize on markup. Then apply styles as needed - either at site level or more granular. Site level is easier with but more custom code need to be written if you have to make this granular - to template/page specific.
In order to standardize on markup, I'd probably start from core components. Easier that way. If not, start from a base front-end framework and build on it. Relatively easier to maintain and upgrade.
Also might have to think about versioning components down the line when you make incremental changes
I'm assuming this is probably because of different client libraries for multiple websites. The best way I can think is that you can extract the generic components which need to be used across all the websites. Just create a base clientlib for those components and embed this base clientlib in all the other site client libraries and remove the duplicate code from site-specific clientlibs and then you can use style system to define the variation of your component and author in website accordingly.
Well, since you've already mentioned that you're having some constraints using Style system then only thing that make more sense is to having multiple views for the components. You can have multiple views for a single component that can be loaded based on domain or any other parameter. E.g. for component X, there's X.html & view1.html & view2.html. Load view1 & view2 based on condition. it's not my recommended choice but it's a work around for your situation.