Menu
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>
338
You need to keep the widget CSS rules as self-contained as possible, which means that you will need to specify every property that is critical to you design, and make sure that properties like float: none , position: static and so on are explicitly set.
To resolve such conflicts, you have CSS Cascade. The CSS Cascade is a way for browsers to resolve conflicting CSS declarations. By specifying CSS rules, you specify where the CSS style is added to the cascade hierarchy. The further down a hierarchy a declaration falls, the less likely it will end up as the final style.
What happens when conflicts occur? There may be times when two or more declarations are applied to the same element. It is also possible that there may be a conflict between them. When conflicts like this occur, the declaration with the most weight is used.
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
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
