What could be the reason for app.css overriding external styles. How can we prevent it from happening

Question

I have a external CSS stored in static resource. I am referencing style class from that CSS in many places( lightning components and visual force pages). After winter 18 update,few of my styles especially color and background colour of thead tag is getting overriding with styles from app.css.

I am applying same CSS for both vf page and lightning component. But this is happening only in lightning components, vf page styles are not getting overrided. How to prevent this from happening and wat could be the reason

Answer 1

I had the similar issue with my custom Lightning component on the Napili template, after the Winter'18 release(around Sep 10th), where I had the background-color attribute on the <thead> tag. Only fix I could make was: Having the CSS attribute in each of the <td> tags(Child elements). This fixed my issue.

As this is not a good practice, I have contacted Salesforce support(as <thead>'s CSS attributes used to function well prior to Winter' 18 release). This is what they mentioned to me:

Modifying the background-color for this particular part of the DOM will be added in a future release. It seems to be affected by some of the CSS attributes that are being overwritten on the parent element. Thus the only workaround at this time: Adding the CSS attributes to the child elements rather than parent.

Answer 2

In this scope can help you.

Let suppose you have a rule in your static resource like:

thead th{
   font-weight: bold;
}

<table>
    <thead>
        <th>
            Heading <!-- Your css will apply on this content only if there is no rule for this element in the salesforce css. -->
        </th>
    </thead>
</table>

This can be overridden by salesforce CSS so to prevent this wrap your CSS in a scope and then wrap your elements in a wrapper and wrapper is having the top selector/scope selector you used in your CSS.

Let me clarify with an example:

Old/Current structure in static resource:

thead th{
   font-weight: bold;
}

After adding the scope/wrapper your CSS and HTML becomes this:

.myScope thead th{
   font-weight: bold !important; /* here "!importatnt" is required if added with the salesforce CSS rules else you can leave it. */
}


 <table class="myScope">
    <thead>
        <th>
            Heading <!-- Your css will apply on this content only if there is no rule for this element in the salesforce css. -->
        </th>
    </thead>
</table>

To add scope to your CSS rules you can use online tools like SASS Compiler

Hope this solves your problem!