**こんにちは。ばーんです。**

今回はCSSの命名規則(今回は主にBEM)について簡単にご説明します。

##命名規則とは？

CSSの煩雑さを回避する為に用いられるルールです。
※これがないとスタイルをあてれない！ということはありません

使われる理由はいくつかあり、

- [x] CSSの影響度を管理できる
- [x] 可読性が向上する
- [x] メンテナンスが用意になる

といった理由があります。

**Web制作は1人でやるから大丈夫！
今までも困ってこなかった！**

と思っていたのですが、Airbnbの模写をして気付きました…
クラスが被り過ぎている…
（特に初学者はボキャブラリーが乏しいので…）

##複雑だよCSS
CSSがどのような規則でスタイルを当てているのかはご存知ですか？
CSSはCascading Style Sheetsの略称です。
Cascadingは滝というイメージで上から下に流れていく　を意味しています。
基本的には①上から順に読み込む②詳細まで記載されている方を優先する
は多くの方がご存知だと思いますが、↓の場合はどうでしょう？
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="rNazQMP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="whatColor">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/rNazQMP">
  whatColor</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
※できれば答えを見る前に考えてみて下さい
※また、試しにCSSを1文消したりして優先度を確かめてみて下さい
※こちらは[このサイト](https://codepen.io/hashibadaiki/pen/rNazQMP)を参考にさせて頂いております

##なぜ生まれたのか？
新しい技術は往々にして現状の課題を解決する為に生まれます。

- [x] CSSの影響度を管理できる

上記の例のようにCSSのルールは複雑です。


- [x] 可読性が向上する

また、↓のようにCSSを見ただけで何にスタイルを当てているのか分かりやすくなります。

BEM未使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="YzPxRep" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem1">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/YzPxRep">
  bem1</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

BEM使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="JjoyevY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem2">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/JjoyevY">
  bem2</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

※特にCSSのcolor指定の部分を見ていただきたいです

##BEMの使い方
BEMで調べるとこの部分が多く出てくるんじゃないでしょうか？
自分はここだけ見て少し触って
**「よしっ！できる！」**と思っていました。
が、後々由来や発生した理由など概念的な部分までお聞きできたので理解が深まりました。
（ですので、そういった内容を先に記載しています）

ここの部分は調べると他のサイトの方が詳しく出てくるので省略します。
基本的には、
block__element--modifierの書き方をします。
block ブロック
element 要素
modifier 状態。または装飾　の3点で区分けされます。

何点か補足があり
1.ブロックの下にブロックがあっても構わない
2.B__E--Mでなくても、B--Mでも可能
3.E--Mは不可（必ずブロックが必要）
4.アンダーバーやハイフンは2個つける
（1つでも可ですが、MindBEMdingでは2個が推奨されています。恐らくケバブケースやスネークケースと見分けをつける為かと）
[参考サイト](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)

##勘違いBEM
僕が実際に勘違いしていたのは**「階層構造をそのまま反映できる」**ということでした。
どういうことかというと↓（先程の例で記載）
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="qBEXQgN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem3">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/qBEXQgN">
  bem3</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

このように書く！と思っていました（今回はHTMLだけ記載）。
ところが先程も記載した通りブロックは何個あっても問題ありません。
↑の方が最初はしっくりきていたのですが、HTMLの親ー子ー孫みたいな階層構造とは切り分けて考えて頂いてOKです。

むしろ実体験なのですが、実在のLPサイトを模写した時に、↑のやり方だとBEMが崩壊しました。

ですので↑の例では↓ように書いて頂いてOKです（むしろmodifierは状態や装飾を本来意味するので、こちらの方が正しいかもしれません）
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="rNazQbN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem4">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/rNazQbN">
  bem4</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##その他の命名規則
その他によく使われているものとして、
「OOCSS」「SMACSS」があります。
できればここまでご説明したかったのですが、自分の理解が追いついていないのと、かなりボリューミーになるので今回は割愛させていただきます（また、後日）

その代わりではないのですが、2単語以上の記載についてさらっと触れたいと思います。

**【キャメルケース】camelCase	後ろの単語の先頭を大文字にします。キャメル＝ラクダのコブのように見えるので
【スネークケース】snake_case	単語の間をアンダーバーでつなぐ命名規則です。見た目が蛇のようなので
【ケバブケース】kebab-case	単語の間をハイフンでつなぐ命名規則です。串刺しなのでケバブ**

言語ごとに使用されている方法も違うので、頭の片隅入れておいてください。

###最後に
自分自身が初学者の目線で困ったことと、解決した内容を共有させてもらいました。
少しでもお役に立てれば幸いです
[cv:issue_marketplace_engineer]

**こんにちは。ばーんです。**

今回はCSSの命名規則(今回は主にBEM)について簡単にご説明します。

##命名規則とは？

CSSの煩雑さを回避する為に用いられるルールです。
※これがないとスタイルをあてれない！ということはありません

使われる理由はいくつかあり、

- [x] CSSの影響度を管理できる
- [x] 可読性が向上する
- [x] メンテナンスが用意になる

といった理由があります。

**Web制作は1人でやるから大丈夫！
今までも困ってこなかった！**

と思っていたのですが、Airbnbの模写をして気付きました…
クラスが被り過ぎている…
（特に初学者はボキャブラリーが乏しいので…）

##複雑だよCSS
CSSがどのような規則でスタイルを当てているのかはご存知ですか？
CSSはCascading Style Sheetsの略称です。
Cascadingは滝というイメージで上から下に流れていく　を意味しています。
基本的には①上から順に読み込む②詳細まで記載されている方を優先する
は多くの方がご存知だと思いますが、↓の場合はどうでしょう？
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="rNazQMP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="whatColor">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/rNazQMP">
  whatColor</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
※できれば答えを見る前に考えてみて下さい
※また、試しにCSSを1文消したりして優先度を確かめてみて下さい
※こちらは[このサイト](https://codepen.io/hashibadaiki/pen/rNazQMP)を参考にさせて頂いております

##なぜ生まれたのか？
新しい技術は往々にして現状の課題を解決する為に生まれます。

- [x] CSSの影響度を管理できる

上記の例のようにCSSのルールは複雑です。


- [x] 可読性が向上する

また、↓のようにCSSを見ただけで何にスタイルを当てているのか分かりやすくなります。

BEM未使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="YzPxRep" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem1">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/YzPxRep">
  bem1</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

BEM使用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="hashibadaiki" data-slug-hash="JjoyevY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem2">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/JjoyevY">
  bem2</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

※特にCSSのcolor指定の部分を見ていただきたいです

##BEMの使い方
BEMで調べるとこの部分が多く出てくるんじゃないでしょうか？
自分はここだけ見て少し触って
**「よしっ！できる！」**と思っていました。
が、後々由来や発生した理由など概念的な部分までお聞きできたので理解が深まりました。
（ですので、そういった内容を先に記載しています）

ここの部分は調べると他のサイトの方が詳しく出てくるので省略します。
基本的には、
block__element--modifierの書き方をします。
block ブロック
element 要素
modifier 状態。または装飾　の3点で区分けされます。

何点か補足があり
1.ブロックの下にブロックがあっても構わない
2.B__E--Mでなくても、B--Mでも可能
3.E--Mは不可（必ずブロックが必要）
4.アンダーバーやハイフンは2個つける
（1つでも可ですが、MindBEMdingでは2個が推奨されています。恐らくケバブケースやスネークケースと見分けをつける為かと）
[参考サイト](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)

##勘違いBEM
僕が実際に勘違いしていたのは**「階層構造をそのまま反映できる」**ということでした。
どういうことかというと↓（先程の例で記載）
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="qBEXQgN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem3">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/qBEXQgN">
  bem3</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

このように書く！と思っていました（今回はHTMLだけ記載）。
ところが先程も記載した通りブロックは何個あっても問題ありません。
↑の方が最初はしっくりきていたのですが、HTMLの親ー子ー孫みたいな階層構造とは切り分けて考えて頂いてOKです。

むしろ実体験なのですが、実在のLPサイトを模写した時に、↑のやり方だとBEMが崩壊しました。

ですので↑の例では↓ように書いて頂いてOKです（むしろmodifierは状態や装飾を本来意味するので、こちらの方が正しいかもしれません）
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="hashibadaiki" data-slug-hash="rNazQbN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bem4">
  <span>See the Pen <a href="https://codepen.io/hashibadaiki/pen/rNazQbN">
  bem4</a> by hashibadaiki (<a href="https://codepen.io/hashibadaiki">@hashibadaiki</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##その他の命名規則
その他によく使われているものとして、
「OOCSS」「SMACSS」があります。
できればここまでご説明したかったのですが、自分の理解が追いついていないのと、かなりボリューミーになるので今回は割愛させていただきます（また、後日）

その代わりではないのですが、2単語以上の記載についてさらっと触れたいと思います。

**【キャメルケース】camelCase	後ろの単語の先頭を大文字にします。キャメル＝ラクダのコブのように見えるので
【スネークケース】snake_case	単語の間をアンダーバーでつなぐ命名規則です。見た目が蛇のようなので
【ケバブケース】kebab-case	単語の間をハイフンでつなぐ命名規則です。串刺しなのでケバブ**

言語ごとに使用されている方法も違うので、頭の片隅入れておいてください。

###最後に
自分自身が初学者の目線で困ったことと、解決した内容を共有させてもらいました。
少しでもお役に立てれば幸いです


続きを読むには単価診断を受けてください（30秒）