How to Debug CSS (using CSS)

Sometimes when you're working with CSS you may face some issues that are not very easy to debug, like having horizontal scrolls, overlapping elements, and margins that are more or less than the value that you set.

Even after changing attribute's values and re-writing elements, you're still seeing that strange behavior that you're desperately trying to get rid of.

So you go to Dev Tools and inspect the element, and there's nothing wrong with it, or with its parent elements. Then you start to get crazy because there's no other way to debug the issue and you tried every possibility so far!

CSS doesn't have a debugger like programming languages, so we need to rely on our own abilities to do it manually.

I usually have two approaches to do it: border and background color.

The border approach

This is pretty simple and works for more basic scenarios. You just need to add a colored border * the elements on the screen and see what may be causing issues:

* {
  border: 1px solid green;
}

This approach is good to check isolated groups of elements like headers, footers, lists and so on. For whole layouts it's not ideal because the border property adds some spacing between elements so it may cause inconsistencies on the page layout.

The background-color approach

This approach is more useful to more complex scenarios where border is not a good option, like whole pages and complex components. It's also pretty simple to use it:

* {
  background-color: rgba(0 255 0 / 5%);
}

Now you can clearly see any overlapping elements and identify issues that aren't easy to identify reading the CSS or via Dev Tools!

Wrapping up

Since CSS runs on the browser, we need to be creative to debug it and identify problems.

If you're working with React, you can take advantage of tools like Storybook which enables you to progressively build isolated components.

But without React this may be a tricky task. In these situations you can use the solutions above.

Hope that helps!

If you have any feedback or suggestions, send me an email

Great coding!