フロントエンドエンジニア

BEMの命名規則でCSSの破綻を防いで運用に生かせる設計手法を紹介!

こんにちは、SHIBAKEN – @dec_shibaken – です

今回は、HTMLコーディングを担当されているには方不可避な内容になるかと思います。

それは、CSS設計思想です。そしてCSS設計思想とは、徹底したルールで作られたクラス命名規則のことです。

私は、会社勤めの頃に、任されていた案件はどれも大規模なものだったので、設計を意識せずに書くことは許されませんでした。なぜなら、いつかはこの案件を引継ぎますし、次の担当者が私の設計したCSSを触ることになるからです。

CSSは書くことは簡単ですが、運用までを考慮した書き方は本当に悩みますよね。そんなを悩みをお持ちの方に、今回は「BEM」をご紹介させて頂きたいと思います。

Sassの知識が必要になります。あらかじめご了承ください!

そもそもBEMって?

「BEM」は、Block Element Modifierの略です。

Block 例えるなら、親、塊、箱
Element 例えるなら、子、要素
Modifier バリエーションや状態の変化

Blockはあるパーツ(コンポーネント)の親要素です。BlockはElementと呼ばれる子孫要素を持つことができます。Modifierはバリエーションや状態を変化させるときに指定するもので、BlockかElementと同階層に指定します。

BlockとElementとModifier

これをイメージで説明をするならこんな感じです。

BEMのルールにしたがって、それぞれの要素に対してクラスを付与してみます。
付与したものが以下の通りです

MindBEMding

クラスを付与する時は、お約束として「ハイフン」や、「アンダースコア」をそれぞれ2つずつ使用してつなげていきます。こういった記述をMindBEMdingといいます。

[Block]__[Element]–[Modifier]

実際にコードを書いてみました。

.main{
  text-align:center;
  width:50%;
  padding:20px;
  margin:0 auto;
  border:5px solid #ccc;
  &__box,
  &__btn{
    width:100%;
    display:block;
    &__list{
      background-color:#f5f5f5;
      width:100%;
      display:block;
      height:50px;
      margin-bottom:20px;
      border-radius:10px;
    }
    &--red,
    &--blue{
      display: block;
      height:50px;
    }
    &--red{
      background-color:#e91d63;
      margin-bottom:10px;
    }
    &--blue{
      background-color:#00afd1;
    }
  }
}

命名規則を考える時は必ずcss4つの定義

cssの設計手法を考える時に必要な4つの定義があるので、まずはそちらを紹介いたします。以下の通りです。

・予測しやすい(可読性)
・再利用しやすい(再利用性)
・保守しやすい(メンテナンス性)
・拡張しやすい(拡張性)

CSSの設計を破綻させない「良いCSS」にする為の4つ定義こんにちは、SHIBAKEN - @dec_shibaken - です これからマークアップを初めて行く人に、是非考えて読んでいた...

いかがでしたでしょうか?

小規模であれば設計を意識する必要はあまりないのかもしれませんが、
運用までを想定するような大規模な案件になればなるほど、設計思想の重要性が
ご理解いただだけるかと思います。

是非ご参考の上、CSS設計思想をサイト設計に取り入れてみてはいかがでしょうか?

ありがとうございました!

 

フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /