【保存版】bemとbomの違いを徹底解説！初心者でも分かる3つのポイント

---

bemとbomの違いを徹底的に理解する基礎ガイド

ウェブ開発の現場でよく混同されがちなのが bem と bom の意味の違いです。まず、bem は CSS の命名規則を指します。Block Element Modifier の頭文字をとった略語で、クラス名を体系的に整理するために使われます。具体的には、あるブロックを表す名前、ブロック内の要素、そして要素の状態や変化を表す修飾子を、一定のルールで結合します。たとえば、ブロックがメニュー、要素がアイテム、修飾子がアクティブなら、menu__item--active という形になります。こうすることで、どのクラスがどの部品に対応するかが一目で分かり、スタイルの再利用性と保守性が高まります。適切に使えば、長い CSS が読みやすくなり、別の人が編集しても混乱を避けられるのが大きなメリットです。

一方、bom は Byte Order Mark の略で、ファイルの先頭に現れる特定の文字列です。UTF-8 の場合は 0xEF 0xBB 0xBF のバイト列として表現され、エンコーディングを示す役割を持ちます。ウェブページの読み込みやサーバーの処理の際、BOM があると予期せぬ副作用が起きることがあります。例えば HTML の先頭に BOM があると、出力された HTML の前に余計な空白や改行が入る場合があります。実務では、特に HTML/CSS/JS のファイルを配布・共有する際には BOM の有無を統一することが大切です。

混同を避けるポイント は、文脈を読み解く癖をつけること、プロジェクトのコーディング規約を明確にすること、ファイルのエンコーディング設定を統一することです。以下の表は、両者の違いをいっきに見分ける手掛かりです。

able>項目bembom意味命名規則 ＝ ブロック/要素/修飾子エンコードのマーカー ＝ ファイル先頭の識別子用途CSS の組織化・再利用性向上エンコーディングの指示・保証影響範囲HTML/CSS/JS のクラス名に影響ファイルの読込・解釈に影響

長年の開発現場では、BEM は規約として多くのプロジェクトで採用されています。一方 BOM は、特定のエディタやツールで無意識に混入する場合があるため、設定を統一すればトラブルを減らすことができます。
なお、ウェブページを公開する際には BOM なし UTF-8 を推奨するケースが多いです。
最後に、bem と bom は名前も役割も異なる概念であることを頭に入れておくと、混乱を防げます。

実務での混乱を避けるポイントと実践例

実務での混乱を避けるには、まず規約を文書化しましょう。以下のポイントを覚えておくと、後任にも伝わりやすいです。

• 規約の統一: プロジェクト内で BEM の命名ルールを共有・徹底
• エンコーディングの統一: すべてのファイルを UTF-8（BOMなし）で保存
• 実務の運用: ファイルのエンコーディングを自動チェックするツールを導入
• 開発環境と本番環境の差をなくす
• コードレビューで命名規則とエンコーディングの整合性をチェックする

実践例として、BEM の命名を使う場合、ブロック card、要素 title、修飾子 featured なら card__title--featured と表現します。Bom の問題を避けるには、エディタの設定を UTF-8 の BOM なしで統一し、公開前に必ずエンコードの整合性を確認します。もし外部のファイルを取り込む場合は、 encoding を原因とする不具合を回避するために、差分を隠さずコメントで補足することが大切です。

このように、bem と bom は別物であり、混同を避けるには文脈を意識して扱うことが重要です。日常の開発現場では、規約の共有とツールの設定が最も効く対策です。

ピックアップ解説

ある日の教室で、友だちとコードの話題に花を咲かせていた。bem の話題から bom の話題へと広がると、友だちは「bom はボムみたいでややこしいね」と笑いながら言った。私はすぐに答えた。「 bom はファイルの先頭に現れるエンコードの印で、CSS の命名規則とは別の話だよ」。その言葉をきっかけに、私たちは card__title--featured のような命名例を出し合い、どちらも混同せず理解するためのメモをノートに貼り付けた。結局、UTF-8 without BOM に揃えるのが最善策だと納得し、エンコーディングの話題になるたび、教材用の例と合わせてノートを見返す癖がついた。

---