CODEWITHSUNDEEP
htmlcssstyling
user19308961
user19308961

Reputation:

how to prevent styling overlap

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?

Upvotes: 0

Views: 182

Answers (2)

Kirmola
Kirmola

Reputation: 37

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.

Upvotes: 1

Nemanja2912
Nemanja2912

Reputation: 510

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.

Upvotes: 1

Related Questions