While Loading my site on the client's web page there occurs css property clash issues

Question

When i load my Website in the client's url, there occurs a error which takes the css property from the client's css and changed in our css which affects my site.

Is there is any way to write all the property and value in my class so that it will not take from the client's css?

Answer 1

Do you have the style-loader in your css loader? Look into the rendered DOM and compare the position from the client-css and your react-css. I suspect the react css is inserted as a style tag before the client-css link tag.

Use the extract-text-plugin to generate a separat css file, which you can insert into your DOM after the client's css by hand.

Answer 2

In cases where both stylesheets style the same properties but the wrong stylesheet is winning out (eg you have p {border: 1px solid green; color: blue} and the client css has p {border: 1px solid red} and the tables are getting a red border):

• If possible, tweak your css to avoid the conflict. This may also require tweaking your markup. For example, if your css and the client's css provides styles for a class called .myclass , you could rename yours to .mynewclass .

• You may also be able to get around this by increasing the specificity of your styles. For example, if .myclass is styled in the client css, your css could style body .myclass . For more on specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

• There's always !important (eg .myclass {border-color: green !important} ) which may make your styles win over the client's. Keep in mind that using a lot of !important is generally considered a sign of bad CSS.

---

In cases where the client stylesheet is styling a property you want left at the default (eg you want borderless div s, but the client css specifies p {border: 1px solid red} ) you'll have to add an override: p {border: 0;} .

If you can wrap all your markup in an overriding class, you can do something like

 /* client's styles */ p { border: 1px solid blue } /* your styles */ .reset p { border: 0; } 

 <p>client (border)</p> <div class="reset"> <p>you (no border)</p> </div> 

Or maybe everything you add to the site is always inside the same element, like .main . In that case, in the above example you could style .main p .

If using a wrapper won't work, you can always add a reset class to every one of your elements. That will be a hassle, but it'll work:

 /* client's styles */ p { border: 1px solid blue } /* your styles */ p.reset { border: 0; } 

 <p>client (border)</p> <p class="reset">you (no border)</p> 

If you do a bunch of work with this client, it could be worth developing a "reset.css" with all your reset rules.