はじめてのBEM 勉強会コンテンツ紹介

社内で行なった勉強会のコンテンツまとめです。

対象

・複数人チームでのWebフロント開発初心者
・html, css, scss書いたことはある

BEMとはなんぞや

CSS設計、命名規則のひとつ。わりかしメジャーです。ベムとよみます。

そもそもCSS設計って色々あるけどその違いは？こちらのブログがめちゃわかりやすいです。わたしは小さいWebページならBEMでいいんじゃないかと思います。

OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつけるOOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける | Black Everyday Company

BEMのメリット

・ブロックは独立パーツなので他のパーツに汚されない
・他の人が書いたクラス名でもだいたいの意図を予測できる
・（BEMに限らないが）命名の方針があることで無駄な時間ロスしない
・ゴツすぎないので取り入れやすい

基本の考え方

・Block：デカイくくり
・Element：くくった中にある要素
・Modifier：上記2つに状態とかのバリエーションつけたいときに使う

例えばこんなかんじのリスト要素があったとして

ブロック：基本のパーツ

エレメント：ブロック内の要素。ブロックに対して「__（アンスコ2こ）」でつなげる

モディファイア：ブロックやエレメントのバリエーション。「--（ハイフン2こ）」でつなげる

HTML

<ul class="list">
  <li class="list__item">one</li>
  <li class="list__item">two</li>
  <li class="list__item list__item--blue">three</li>
  <li class="list__item">four</li>
</ul>

SCSS

.list {
  width: 200px;

  &__item {
    font-weight: bold;
    color: black;

    &--blue {
      color: blue;
    }
  }
}

規則

まずはこちらをご一読ください。
実作業でも手元に置いてチラ見しながら書けば無問題です。

一番詳しいCSS設計規則BEMのマニュアル - Qiita

気をつけるポイント
・基本的にはシングルクラス（modifierつけたい時以外）
・HTMLの構造とSCSSの構造は極力分離する
・孫要素を作らない（別のblockに分ける）

ハンズオン

BEMを使って簡素なペライチWebページを作ってみます。

サンプルコードはこちらです。

yiio/bem-training