This started right after we shipped a production release of our feature. One of our engineers was running through the change to confirm everything looked right, and the issue caught his eye — since it's a UI thing, it was easy to spot. The CSS width of some components was broken. In the development environment everything had been fine, working perfectly. But in production it wasn't. He reported it. So I started digging. The first instinct was the wrong one. I dropped an !important on the rule, the width snapped back to what it should be, and I almost called it a day. Then I realized I'd just patched a symptom without understanding the cause — and a bug that behaves differently between dev and prod is exactly the kind of bug that comes back six months later in a different file. So I rolled the !important back out and tried to actually figure out what was happening. What was colliding The element in question was a form label.…