短い​クラス名は、​長い​クラス名の​一部でもある

スタイルのクラス名をまとめて変更しました。範囲ははっきり決めていました。あるプレフィックスで始まるものだけです。

変更後、3つのコンポーネントからスタイルが消えていました。どれも変更リストには載っていない名前です。

原因

変更した名前が、ほかの3つの名前の頭の部分と同じだったのです。

一括置換が見ているのは文字であって、意味ではありません。.mz-card と .mz-card-meta が別物だとは知らず、後者は前者に何文字か足しただけのものに見えています。

なぜチェックがすべて通ったのか

結果が正しいCSSだったからです。

置換後のスタイルシートは構文として正しく、解析も読み込みも適用もできます。ただ、別の要素に当たっているか、どこにも当たっていないだけです。

コンパイラもフォーマッターも構文チェックも、これについては何も言いません。気づけるのは人の目だけで、それもどのページを見ればいいかを知っている場合に限られます。

2つのやり方

① 置換には必ず境界を付ける。クラス名の直後に来るのは、任意の文字ではなく、引用符、空白、波括弧のいずれかに限ります。

② まずドライランする。ヒットした箇所を前後の文脈ごとすべて出力して目を通し、それから実際に書き込みます。かかるのは30秒。防げるのは、原因のわからない表示崩れ1件です。

命名そのものの教訓

名前を名前空間として設計しておけば、この種の衝突は起きません。

⭐ ユーティリティの名前は、完全に独立させるか、プレフィックスと取り違えられない語尾を付けるか、のどちらかです。「階層があるように見える」ことと「機械が階層を読み取れる」ことは、別の話です。