仕事仲間と、名前の付け方でエクスプローラや検索が楽になる話をしました。あくまで好みの比重が大きい部分もあるので、ここでは判断の材料として整理します。最後に、アイコンファイルは icon_x のようにカテゴリ（種類）を先に置く方針を自分のプロジェクトの基本にすると決めた、という結論も書いておきます。

きっかけ：同じ系統が並ぶと探しやすい

コンポーネント用の SCSS パーシャルを名前順で並べたとき、slider や splide から始まるファイルは隣同士にまとまり、一覧で追いやすい。一方で button や title、heading などは、修飾語の付け方次第でリストの上下に散らばってしまう、という話になりました。

画像ファイル名でも同様で、並びや検索のしやすさは「偶然」ではなく、接頭辞や語順のルールでだいぶ変わる、という認識を共有しました。

コンポーネントCSS：何を先に置くか

BEM の block__element のように、

1. なんのパーツか（大きい方のラベル）
2. どんなバリエーションか

の順にすると、c-title の近くに c-title-section のような名前が並び、名前順ソートでの発見がしやすい、という提案でした。

ただし c-title-section は、英語としては「section title（セクション用の見出し）」の方が馴染みがある、という感想も出ました。ここは好みの領域ですが、厳密には 「一覧しやすさ」と「読んだときの自然さ」が常に両立しない ことがあります。

方針としては、例えば次のような折衷もありえます。

• ファイル名は一覧性重視で c-title-* に寄せる
• BEM のクラス名はチームやコンポーネントの意味に合わせ、section-title など読みやすい語順のままにする

ルールを分けるかどうかは運用コストとの相談ですが、「名前は1つに統一しなきゃ」と思い込まなくてよい、という点はメモしておく価値があると思います。

アイコン画像：x-icon と icon_x

具体例として、次の2パターンが挙がりました。

x-icon.svg
insta-icon.svg

icon_x.svg
icon_insta.svg

後者では icon_ が先頭に付くため、名前順ソートでアイコン類がまとまりやすい、という趣旨です。逆に x-icon のようにブランド名を先に置くと、x-logo.svg などと「ブランド単位」で揃えたい場合には向く、というトレードオフもあります。

自分の方針：icon_ を基本にする

このやりとりを踏まえ、アイコン画像は icon_ プレフィックスを基本にして命名していく、という方針にしました。フォルダを icons/ のように分ける場合でも、ファイル名に種類が出ていると一括置換や grep のときに迷いにくい、というのが主な理由です。

運用で迷ったら、次だけは揃えると摩擦が減ります。

• 区切りは ハイフンかアンダースコアかをプロジェクトで固定する（例：icon_insta と icon-x を混ぜない）
• サイズ違いや状態違いがあるなら icon_*_lg のような段階をどこに付けるかを一言ルール化する

まとめ

• 命名は「正解1つ」ではなく、並び・検索・読みやすさの優先順位の設計に近い。
• SCSS は「カテゴリ先頭」で一覧性が上がる一方、英語の自然な語順とはズレることがある。
• アイコンは icon_ 先頭を基本にし、自分のリポジトリではその方針で揃える、と決めた。

同じ種類のファイルがエクスプローラで隣接すると気持ちがいい、というのは地味ですが、レビューや差分確認の回数を減らす効果は無視できないと思います。