border: 1px solid red;

So a week or two ago I saw a thread on Twitter where people were howling about how awful border: 1px solid red; was for CSS debugging. While some of them had a few points, the general consensus was that it was worthless and you're an awful human being if you used it. You know how Twitter is.

I use border: 1px solid red; so much that it's almost a reflex at this point. To me it's the perfect debug check for a number of reasons. Does it cover every debug situation? No, nothing does, but it is extraordinarily handy.

Can I make changes?

A lot of times you'll find yourself editing your CSS and refresh the browser only to see ... nothing. Was there a compiling error? Am I looking at production while editing my local branch? That happens to me a lot. The main thrust of a simple red border is to answer the simple question: Am I actually making changes to what I see on the screen.

Specificity

Another reason I use it is to check specificity. Am I affecting other components that I shouldn't? Am I even editing the right component? Working in legacy systems that you didn't write can be confusing, especially if the class names aren't clear. So using the border check means I know for certain that I am working on the right piece of code.

Availability

Another reason is availability. The Twitter thread had a lot of comments about specific browser plugins and various tools, but a lot of times those simply aren't available. While pairing, your partner's setup may be drastically different from yours. So no matter what machine or dev environment you might be in, its one diagnostic tool always at your fingertips.

It's not a panacea

It doesn't solve everything. If your system isn't using box-sizing: border-box it can throw off layouts. However that isn't what border: 1px solid red; is for. It's Step 0 in my debugging checklist. Start simple. Can I make changes, and if I can, am I in the right place? After answering that I can dig deeper with more robust tools or techniques.