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?

CodePudding user response：

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.

CodePudding user response：

I don't think there is any other way than giving unique class to every element.

Let me elaborate:

If you have used a web framework, say NextJs, you will see that it assign a unique class to every element to avoid class collision within page. And Styling IS one of them.

So yeah, Having unique classes IS necessary to avoid css collision, unless you don't go for an ID approach.