how to prevent styling overlap

Question

I'm building an app with many different components and I've run into an issue where styling from one component has overlapped with styling from another component. Other than giving each paragraph tag it's own class, is there anyway to prevent this? Say with a keyword or something?

Answer 1

Try to use as a specific selector as possible in your CSS file. It isn't just .class or #div. When you find a more specific selector you can always add !important after all your style.

It will have a higher importance level than everything else, but you can still change it from a different file if you use the same level.

This can be something like this:

.some-div > p {
   font-size: 16px !important!
}

Please check this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for selectors.