How to resolve CSS class name conflicts from multiple third party libraries?

Question

Trying to help a friend with a project. Due to client demands, they're being forced to use two third-party CSS libraries which have conflicts with each other. For example, library A defines a class called .active and library B also defines a class called .active. You can see where this might go wrong.

One solution is to go in and manually rename the classes in one library or the other, but this seems clumsy to me, in case anyone in future maintenance tries to use a clean version of the original third party library, among other issues. Also, the number of conflicts is not yet known, but thought to be large. Namespacing is not very feasible for these reasons.

My solution personally would be to roll my own CSS for this project, and properly namespace it. But it sounds like the client refuses to allow this and demands on using both CSS libraries for no particular reason that they care to share.

Since we are not in control of either library, are there any other tricks to isolate HTML elements from one library or the other? For example, is there a way to tell an element to accept CSS styles with a given class, but only from a specific .css file? I'm making up fake syntax here, but something like:

<div class="myStyles.css[active]">styled content</div>

Answer 1

Your concern looks good.

Please find my findings below regarding your concern.

is there a way to tell an element to accept CSS styles with a given class, but only from a specific .css file

<div class="myStyles.css[active]">styled content</div>

This is not possible in HTML5/CSS.

One way you can resolve this conflict is,

Include your custom.css file along with the 3rd parties(after them in order) with necessary style for #my-wrapper .active { ... }.

You will obviously be having a wrapper selector to this div of yours like below

<div id="my-wrapper">
  <div class=".active">styled content</div>
</div>

Now, the styles for .active in your custom.css will be placed on priority due to order of linked CSSs