DEV Community

Cover image for Finding Ghost elements with Ghost CSS !
Shrihari Mohan
Shrihari Mohan

Posted on


Finding Ghost elements with Ghost CSS !

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;
Enter fullscreen mode Exit fullscreen mode

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.
Without this

Sample Example

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.

More use cases and found an existing post on after writing this.

If you are here it means you may have enjoyed reading this blog. Just follow me @shrihari which will motivate to write more.

You can make a drink Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

Peace 🕊

More things from me

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post