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.

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.