![「予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?」の見出し画像](https://ferret.akamaized.net/uploads/article/7808/eyecatch/default-c514da55ce0c08a1f87176df48b8ea1a.png)
予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?
BEMにおける命名規則
BEMでは、命名規則が明確に定義されているので、BEMを知っている人であればコードを見ただけでどれがどんなパーツになるのかが一目瞭然です。
裏を返すと、BEMを使うために命名規則を学ぶ必要があります。
しかしながら、BEMの命名規則は非常にシンプルです。
ここでは、Block・Element・Modifierのそれぞれの命名規則に関して確認していきましょう。
1. Block
Built on Pablo
Blockでは、それ自身で意味のある部品の名前をつけていきます。
Blockは入れ子にしたりお互いにインタラクションを起こしたりできますが、文法上は対等に扱います。
DOM表現(コントローラーやモデル)のない要素もブロックとして扱います。
● HTML
HTML要素は下記のようにクラス名が付けばBlockとします。
<div class=“block”>・・・</div>
● CSS
CSSでは、以下のように、HTML要素は付けずに、クラス名のセレクターだけにします。
タグ名やidを付けることもありません。
.block { color: #0060e6; }
2. Element
Built on Pablo
Elementは、Blockの中にあるもので、それ単体では意味のあるパーツにならないものを指します。
すべてのElementはBlockと紐づけて考えます。
Elementは通常、Blockの後ろに2つのアンダースコアをつけて命名します。
● HTML
Blockの中にあるHTML要素はすべてElementと考えます。
あるBlockの中では、すべてのElementは対等に扱います。
<div class=“block”>
<span class=“block__element”>Home</span>
<span class=“block__element”>Menu</span>
</div>
● CSS
Blockと同じように、クラス名のセレクターだけで書いていきます。
同じページ上の別のBlockやElementに依存してはいけません。
.block__element { color: #0060e6; }
以下のようにBlockと続けて書いたり、HTML要素の後ろに続けて書いてはいけません。
.block .block__element { color: #0060e6; } // ×
div.block__element { color: #0060e6; } // ×
3. Modifier
Built on Pablo
ModifierはBlockやElementのフラグのようなものです。
フラグをつけるには、BlockやElementの前にダッシュを2つつけて命名し、値がある場合はその後ろにもう一つダッシュをつけます。
「.block—modifier」のようにBlockにつくこともあれば、「.block__element--modifier」のようにElementにつくこともあります。
● HTML
Modifierはあくまでもオリジナル要素に対して色や大きさを変えるだけの役割を持っています。
<div class=“block block—mod”>
<span class=“block__element block__element—modifier”>Home</span>
<span class=“block__element”>Menu</span>
</div>
ただし、以下のようにModifierだけを単独でマーキングしてはいけません。
<div class=“block—modifier”>・・・</div> // ×
● CSS
Modifierも、CSSで記述するときには単独で書きます。
.block—modifier { color: #999; }
ただし、Modifierに関しては、BlockレベルのModifier付きの下にElementを書いてもいいことになっています。
.block—modifier .block__elem { color: #999; }
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
●課題
●その他
![会員特典画像](https://ferret.akamaized.net/assets/member_merits-76b1dc1d9e3ef06b0617b354b0b206fb64aa9fcabf009b7b2b1a2a1d002bf591.gif)