We renamed a set of CSS classes, and the scope was clearly stated: only the ones starting with a particular prefix.
Afterward, three components had lost their styles. None of them was on the rename list.
Why
The name we changed was the first part of three other names.
Find-and-replace sees characters, not meaning. It has no idea that .mz-card and .mz-card-meta are two different things. To it, the second is just the first with a few more letters.
Why every check was green
Because the result was valid.
The renamed stylesheet was syntactically correct. It parsed, loaded and applied. It just applied to something else, or to nothing.
No compiler, linter or syntax check has an opinion about that. Only a human eye can catch it, and only if it already knows which page to look at.
Two habits
① Always anchor the match. A class name has to be followed by a quote, a space or a curly brace, not by any character at all.
② Do a dry run first. Print every match with its surrounding context, read through it, and only then write the change. It costs thirty seconds and saves you a visual bug you’d never trace back.
A lesson about naming
Design class names as namespaces and this kind of collision can’t happen.
⭐ A utility name should either stand entirely on its own or end in a way that can’t be mistaken for a prefix. Looking hierarchical and being recognizable as a hierarchy by a machine are two different things.
