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.