Popular posts

If I'm understanding your question you have this going on:

/* your code */
a {}
/* their code */
a {}

Generally you shouldn't do detailed styling directly on element tags as they as such weak selectors. You're essentially hoping your style will load last, which you can't really guarantee.

You need to put your CSS into a namespace or follow a CSS architecture.

A really simple namespace approach:

/* your code */
.your-app-namespace a {}
/* their code */
a {}

Ensure your application's outermost element has class="your-app-namespace" and your styles should apply:

<a href="example.com">Their link style</a>

<div class="your-app-namespace">
  <a href="example.com">Your link style</a>
</div>

If the other styles have stronger selectors you will have to increase your selector weight until it works. How you do that depends on the selector weight of the competing CSS.

Web components, css-in-js etc will also work but to be honest you should probably try a simpler approach first as it may be all you need (much less code).