コーディングルールを覚えて正しい記述をしよう【BEM】

こんな悩みを解決していきますね。

この記事は約8分で読めます。

BEMってなに?

BEMとはBlock、Element、Modifierの頭文字を表しており、Blockは主パーツになるもの、Elementは子パーツ、Modifierは修正要素、例えば同じボックスが3つあり、ひとつだけ背景色を違うものにしたいとします。それに対して付けるイメージです。
実際にソースを見てみましょう。

See the Pen ExPjQPz by kazuto1027 (@kazuto1027) on CodePen.dark

BlockとElementは__(アンダーバー2こ)で結び、ElementとModifierは–(ハイフン2こ)で結びます。
注意点としては、Element–ModifierとBlock__Elementを両方用いる点です。

elementのネストは禁止です。

• ネストとは・・・ある同じ構造の内部に同じ構造が含まれていることをいいます。
  
  

NGパターン

See the Pen vYLOdWg by kazuto1027 (@kazuto1027) on CodePen.dark

elementの中に同レベルのelementを含みたい場合は次のようにします。

OKパターン

See the Pen vYLOdpg by kazuto1027 (@kazuto1027) on CodePen.dark

また、block内に別のblockを入れるものもOKです。以下のようになります。

See the Pen gOPpvvG by kazuto1027 (@kazuto1027) on CodePen.dark

クラス名の決め方　名前と機能を一致させよう

https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

以下参考:CSSのクラス名を決めるときに使うリストをつくりました　より

形容詞(名詞を修飾する品詞)

• main – 主要な
• primary – 主要な
• common – 共通の
• global – 全体的な
• local – 局所的な
• general – 一般的な
• site – サイトの　　　　　　・・・などが挙げられます。よく使うもの
  を赤字で示してあります。

分類(サイトのカテゴリーなどに使える名詞)

• about – 〜について。
• work – 仕事・任務。
• product – 製品。
• service – サービス。
• news – お知らせ・近況。
• event – 行事・出来事。
• history – 歴史・沿革。
• archive – 保存・保管・記録。
• concept – 構想・概念・考え。
• recommend – おすすめ・推奨。
• table of contents – 目次。
• index – 索引・指標。
• contact – 問い合わせ・連絡。
• inquiry – 問い合わせ・質問・調査。
• access – 交通手段。
• shop – 店舗。
• related – 関連のある。
• privacy – 個人情報の利用・保護の方針。
• faq – よくある質問
• input – フォームの入力画面。
• confirm– フォームの確認画面。
• finish – フォームの完了画面。
• search-result – 検索結果画面。
• checkout – 保存していたアイテムを購入する画面。・・・などが挙げられます。よく使うものを赤字で示してあります。

Blockで使われるclass名

• section – 区分・区画。
• content – 文書の内容。
• article – 記事。
• post – 投稿。
• top – 頂上・上部。
• home– トップページ。
• sidebar – 補足記事。
• wrapper – 内包する。
  • wrap – wrapperの略語。
• group – 集まり。
• area – 特定の場所・範囲。
• emphasis – 強調・重視。
• catch – 興味を惹く・関心をつかむ。
• note – 注釈。
• description – 概要。
• introduction – 前置き・導入。
  • intro – introductionの略語。
• announce – お知らせ。
• information – 情報。
  • info – informationの略語。
• action – 重要度の高い。
• more – もっと多くの。
• feature – 主要なもの。
• detail – 詳細・細部。
• summary – 概要・要約。　　　　　・・・などが挙げられます。
  よく使うものを赤字で示してあります。

Elementで使われるclass名

• inner – 内側の。
• outer – 外側の。
• body – 主要部分。
• head – 上部。
• foot – 下部。
• heading – 見出し・表題。
• title – 表題・題名。
• lead – 見出しの補足・記事の要約。
• list – 一覧・表。
• menu – 一覧・表。
• item – （表やデータなどの）項目。
• unit – 1つの単位・1セット。
• column – 縦列。
• text – 本文。
• caption – 画像・図表の補足文。
• thumbnail – 縮小した画像。
• avatar – 人の顔を示す画像。
• feature – 特徴を補足する画像。
• tel – 電話番号。
• address – 住所。
• date – 日付。
• time – 日時。
• category – 分類・部類。
• tag – 識別子。
• next – 次の。
• previous – 前の。
  • prev – previousの略語。
• mask – 覆い隠す。 ・・・などが挙げられます。
• よく使うものを赤字で示してあります。

Modifierで使われるclass名

• success – 成功。
• alert – 注意・警戒。
• attention – 配慮・気配り。
• error – 間違い・失敗。
• caution – 用心・警告。
• warning – 警告・予告。
• danger – 危険・驚異。
• small – 小さい。
• medium – 中間。
• large – 大きい。
• huge – とても大きい。
  • xl – hugeの類語でExtra large（特大・超大型）のこと。
• reverse – 反転する。
• push – 前方に押す。
• pull – 自分の方に引く。
• offset – 相殺する・埋めあわせる。
• left– 左側の。
• center – 真ん中。
• right – 右側の。
• top – 上部。
• middle – 真ん中。
• bottom – 下部。
• round – 角丸。
• circle – 円形。 ・・・などが挙げられます。
• よく使うものを赤字で示してあります。

まとめ

いかがでしたでしょうか? 初心者の頃こそきちんとしたコードを書くようにしましょう。クラス、id名を機能と一致させ、BEM手法を用いる事で圧倒的に分かりやすいコードになります。是非覚えて実践してくださるとうれしいです。

合わせて読みたい記事はこちら

Prev→→→未経験向けに徹底解説!WEBデザイン講座　class編

Next→→→未経験向けに徹底解説!プログラミングをする前にエディターの準備をしよう。