Toggle the stylesheets to see how the standard border method falls short.

Debugging CSS can sometimes be a challenging task. Identifying which styles are applied to an element or understanding how elements are nested and styled can be time-consuming. While the standard approach to debugging CSS is to use the * { border: 1px solid red; } rule to outline all elements, there's a more effective way to gain insight into your styling hierarchy. Let's explore a better method by using a more informative wildcard selector:

* {
  color: hsla(210, 100%, 100%, 0.9) !important;
  background: hsla(210, 100%, 50%, 0.5) !important;
  outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
}

Why the Standard Approach Falls Short

Most importantly, the border property adds sizing to all elements. This actually moves elements on your page around, making it difficult to pinpoint what's going wrong. This is especially true when debugging responsive styling.

While the standard * { border: 1px solid red; } approach does help identify the boundaries of elements, it doesn't provide any additional information about:

  • How elements are nested
  • Whether or not elements are overlapping
  • How elements are overlapping.
  • Hidden divs or other invisible elements.

This can make debugging complex layouts or intricate designs a bit of a headache.

A More Informative Wildcard Selector

The improved wildcard selector takes debugging to the next level. Here's what each property in the rule does:

  1. Color: Using color: hsla(210, 100%, 100%, 0.9) !important;, this rule changes the text color of every element to a nearly opaque blue. This makes it easier to see text even in complex layouts or with text on top of background images.
  2. Background: By setting background: hsla(210, 100%, 50%, 0.5) !important;, this rule adds a semi-transparent blue background to every element. This is incredibly helpful for distinguishing elements from one another, particularly when they overlap or have no background. This also removes all background images for easier debugging (especially if items are hidden behind an element with a background image)
  3. Outline: The outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; rule creates a solid blue outline around each element. This helps in identifying the boundaries of elements without changing their layout.

By combining these properties, you can easily differentiate between elements, even when they're nested or overlapping. It's a powerful approach for gaining a quick overview of your website's structure and identifying any styling issues.

The 'Important' Note

You might have noticed the !important declaration in the rule. This is crucial to ensure that these styles take precedence over other CSS rules. It's added to guarantee that your debugging styles will be applied consistently, regardless of the specificity of other rules.

Using compilers like SCSS/SASS

There are two ways to use this in your project.

Use a mixin

Using a mixin allows you to use this anywhere in your project without switching files. Simply add the following anywhere in your project to include.

* { @include debug; }

Create a debug.scss file

@mixin debug {
  color: hsla(210, 100%, 100%, 0.9) !important;
  background: hsla(210, 100%, 50%, 0.5) !important;
  outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
}
Drawbacks to the mixin method

If you have any of these properties containing !important loaded after you call this mixin, then that will override the debug styles.

Side note, you shouldn't be using !important. It means your selector isn't specific enough.

Import a file

Instead of using a mixin, simply create the wildcard style in this file. Then when you want to use it, add or uncomment the following line from your main stylesheet:

@import "debug";

Drawbacks to the import method

I personally use this one. It's easy, but you do have to switch to your main stylesheet file to uncomment out the line. Not a big deal, but it does open up another tab in your IDE.

Conclusion

Debugging CSS doesn't have to be a tedious process. By using a more informative wildcard selector with properties like text color, background color, and outline, you can easily identify elements, even when they're complex or overlapping. This approach provides a clearer view of your website's structure and can save you valuable time when troubleshooting styling issues. So, give it a try and take your CSS debugging to the next level!