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

CSSのクラス名をまとめて変えました。範囲ははっきり決めていて、あるプレフィックスで始まるものだけが対象です。

変えたあと、3つのコンポーネントのスタイルが消えていました。どれも変更リストには入っていません。

原因

変えた名前が、ほかの3つの名前の先頭部分とちょうど同じだったのです。

一括置換は文字だけを見ていて、意味はわかりません。置換から見れば、.mz-card-meta は .mz-card の後ろに何文字か付いたものでしかなく、それが別物だとは知りません。

チェックがすべて通った理由

置き換えた結果が、正しいCSSだったからです。

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

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

いまのやり方

置換には必ず境界を付けます。クラス名の直後に来てよいのは、引用符、空白、波括弧のどれかで、任意の文字は認めません。

まずドライランをします。ヒットした箇所を前後の文脈ごとすべて出力して一度目を通し、それから実際に書き込みます。かかるのは30秒ほどです。

名前を付けるときも少し考えるようになりました。ほかの名前のプレフィックスになりそうな名前は、その場で別の名前に替えます。名前に階層があるように見えても、機械がそれを読み取れるとは限りません。