Finding Ghost elements with Ghost CSS !

Outlines help us identify the problem!

When you spend enough time at the front-end development, There will be some irritating moments where you couldn’t figure out what is happening with the margins/paddings and scroll issues.

The ghost-css comes in handly when tackling these problems. We just make the following to all the elements.

* {
    background: #171717 !important;
    color: #EDEDED !important;
    outline: solid #DA0037 1px !important;
  }

The above code does the following to your website. You can see there is a small problem with the alignment with Silly Project , 2nd one is slightly above.

Normal View , with a slight alignment issue with the orange border being above than another

With Ghost CSS Detector

The first horizontal line we can see this clearly and the problem is because of the video being different heights.

This 3 lines of code have saved me a lot of debugging with getting to know whats wrong with the code easily.

If you are here it means you may have enjoyed reading this blog. Just follow me Shrihari Mohan which will motivate to write more, contribute open source. You can make me drink Buttermilk 🥛. Small support comes a long way!

Subscribe to get a free copy of blogs in your Inbox directly.

peace 👻

More things from me

Utilizing Chat GPT as a Web Developer

OAUTH for beginners and Key Terms.

You may have missed these HTML Tags/Tricks.