Ideally when you plan to use the same set of components, there is a reason for that which is to have standardized layout across all the major and minor sites/domains of the customer. In fact you can recommend to the customer to have standard styling across sites.
Anyway there can be cases assuming an ecommerce site with different product lines. In such a case if you want to use the same set of components AND TEMPLATE, then you must write one global clientlib and develop your components/page components with different options in dialogs so that the css rules match the component styling/dialog options.
you can have a dropdown of layout type in page properties and you can select the layout A or B and your css class will have rules corresponding to A and B.
There are different way to address this , one I mentioned above. Now if you still want to use 2 clientlibs then you can add checks to your template/page components if this is site A load clientLib A else B.
You can also do it by the way you mentioned in the question that you can have different etc/designs and then use as per site.
This question needs more detailed analysis of what all differences are there in between the two sites.