5

Is there a tool where I can upload/(or add content of files in textboxes) two CSS files and it shows me the conflicting css rules?

Example

foo.css

body { font-size: 1rem; }
...
.nav { background: yellow; }
...
.header { font-size: 12px; }
...

bar.css

body { font-size: 1.4rem; }
...
.nav { background: red; }
...
.header { font-color: black; }
...

conflicts found after tool ran:

foo.css: body { font-size: 1rem; }
bar.css: body { font-size: 1.4rem; }

foo.css: .nav { background: yellow; }
bar.css: .nav { background: red; }

This would help me to identifiy conflicts and find a fix. Otherwise I have to open the developer tools and manually go through each html element on the site and search for conflicts.

fix.css

In fix.css which I am creating manually (or by the tool) I can decide which css of these two files should get loaded:

body { font-size: 1.4rem; }
.nav { background: yellow; }
5
  • 1
    Welcome Black! You are looking for a web-app (online tool), correct? – RockPaperLz- Mask it or Casket Aug 26 '20 at 22:11
  • @RockPaperLz-MaskitorCasket, I am also ok with any other application, but web application would be preferably. – Black Aug 27 '20 at 8:39
  • 1
    Sounds good. If it's not a web-app, which operating system(s) should it run under? – RockPaperLz- Mask it or Casket Aug 28 '20 at 0:37
  • Preferable windows – Black Aug 28 '20 at 8:04
  • You are looking for an automated tool. For single CSS rules, where you are unsure, right click the HTMl page element and choose "inspect" - you will see which rule applies, and also which it overrides. – Mawg says reinstate Monica Sep 30 '20 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.