Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
114
Help us understand the problem. What is going on with this article?
@torumiyamon1987

[CSS]BEMの方法論とMindBEMdingという記法

More than 5 years have passed since last update.

BEMの方法論とMindBEMdingという記法

BEMとは

Block、Element、Modifierの頭文字を取ったものであり、要素を3つのどれかに当てはめて命名していく方法。

  • Block → 構成のルートとなる要素。
  • Element → Blockの子要素。Blockでしか生きられない。
  • Modifier → 元となるBlockまたはElementから変化した状態を表す要素。

オブジェクト指向風に言うと...
Blockは継承元のクラス、Modifierはその派生クラス、Elementはそれらのクラスに所属するメソッドもしくはプロパティである。

参考:BEM-Methodology Definitionsの日本語訳

MindBEMdingとは

BEMをCSSのクラス名に適用するために作られた規則で、CSS界隈ではMindBEMdingがBEMと呼ばれることが多い。お約束として、Elementはアンダースコア2つ(__)、Modifierはハイフン2つ(--)で連結し、BEMの各要素を表現する。

BEM記法
block
block__element
block__element--modifier
block--modifier
block--modifier__element

これをhtmlで書くと、こんな感じになる

html
<div class="block">
    <div class="block__element"></div>
    <div class="block__element block__element--modifier"></div>
</div>
<div class="block block--modifier">
    <div class="block__element block--modifier__element"></div>
</div>

非常にキモイですね。しかし、キモイと思うのは最初だけで、使ってみると、非常に分かりやすく、良いアイデアである。
良いアイデアと言うのは、CSSの設計、その命名のときに考えるのは、それがいかに明白であるかということと、汚染されるリスクを抑えられるか、ということ。つまり、ワードを明確に区切ることで、その機能・カテゴリを区別するという点においては、別に単一記号であろうが、キャメルケース、スネークケースであろうがなんでもいいかもしれない。しかしスタイルが汚染されるリスク、という点でBEMおよびMindBEMdingは優秀である。

参考:Summary of MindBEMding - getting your head ‘round BEM syntax

114
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
114
Help us understand the problem. What is going on with this article?