質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4549閲覧

BEMでのブロックとエレメントについて

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/03/18 06:15

BEMでのブロックとエレメントは下記の場合なら、

1.
下記がブロックで

<div class="modal-button-wrap">

下記がエレメント
<a class="animation-hover action-hover modal-button-wrap__button">
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
</a>

下記がブロックで

<div class="modal-button-wrap">

下記もブロックでしょうか?
<a class="animation-hover action-hover modal-button-wrap__button">
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
<span class="modal-button-wrap__border"></span><!-- border -->
</a>

<!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div>

ラッパーやコンテイナーなどの大枠がある場合、中身も大枠もブロックなのか、
大枠だけブロックで、中身はエレメントなのか悩みます。
どのように区別していますか?

お手数ですが、よろしくお願いします。

難しい用語が中心だとわからないので、お手数ですが初心者にもわかるように、教えて頂ける方にお答えいただければありがたいです。
上から目線や、回答になっていない苦言などの回答はしないでください。
すぐに報告します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

###ひとつのBlock内にあるすべての要素を、そのElementとする必要はありません。
.modal-button-wrapの内容はすべてそのElementでなければいけない」と考える必要はありません
ボタンとアイコンは別々の部品(コンポーネント)」と考えましょう。

###細かい粒度でルールセットを分割する
まずBlockについてです。
質問にある内容だとボタンとアイコンを分離しても個別に機能する事が分かるので、ボタンとアイコンは別のコンポーネントとし、それぞれにルールセットを分割する事ができます。
このように、細かい粒度でルールセットを分割する事を意識すると、設計する時に迷う事が少なくなるでしょう。
また「同じ構造が3回出てきたらコンポーネント化する」などのルールを決めておけば、何をBlockにすべきか判断しやすくなります。

次にElementについては、一般的なアナログ時計のデザインをイメージすると分かりやすいと思います。
この場合、文字盤がBlockで、時針・分針・秒針などの針がElementです。
針が文字盤の外に出ると、何を指しているのか分からなくなる事で機能を失い、その結果「時間を指し示す針」という構造的な意味も失われます
このように考えると「何をElementとするべきか」をイメージしやすくなるのではないでしょうか。

なお、Blockは「Elementも含めたひとつの塊」でもあるので、針で時間を示す時計からわざわざ針を外す必要がないのと同じように、Elementが欠けても機能しなければならないと考える必要はありません。
Elementが欠けても機能するのであればそれに越したことはないですが、Elementが欠けて機能しなくなるのであれば、それはCSSのルールセットが問題なのではなく、HTMLのマークアップが適切ではないという事です。

これらを踏まえた上で、質問にあるHTMLのクラスを変更すると次のようになります。
ちなみに、質問にあるHTMLと比較しやすいように、複数の空のspanでアイコンを構成するなどのマークアップについてはあえて手を加えていません。

! 修正
無駄なBlockのModifierが増えないようにElementのModifierで対応する形に修正しました

HTML

1<!-- Drawermenu Button --> 2<div class="button button_type_modal"> 3 <a class="icon animation-hover action-hover"> 4 <span class="icon__shape icon__shape_type_hamburger-top"></span> 5 <span class="icon__shape icon__shape_type_hamburger-middle"></span> 6 <span class="icon__shape icon__shape_type_hamburger-bottom"></span>Menu</a> 7</div>

CSS

1.button {} /* Block */ 2.button_type_modal {} /* Modifier */ 3 4.icon {} /* Block */ 5.icon__shape {} /* Element */ 6.icon__shape_type_hamburger-top {} /* Modifier */ 7.icon__shape_type_hamburger-middle {} /* Modifier */ 8.icon__shape_type_hamburger-bottom {} /* Modifier */ 9 10.animation-hover {} /* Block */ 11.action-hover {} /* Block */

投稿2016/03/20 07:27

編集2016/03/23 13:48
flat

総合スコア617

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/03/20 09:59

>> wrapperやcontainerの内容を外に出したとして、それがデザインも含めて単独で機能するものであれば、それはElementではなくBlockであると考えて良いと思います。 下記が中身なので、下記を出しても機能すればbutton button_type_modalはBLOCKとなるということですね。 <a class="icon animation-hover action-hover"> <span class="icon__hamburger_border_top"></span> <span class="icon__hamburger_border_middle"></span> <span class="icon__hamburger_border_bottom"></span> </a> 今回はハンバーガーのボーダーがないと空っぽのボックスになるので機能しないと思いますが、するとエレメントとなるのでしょうか?
flat

2016/03/20 13:57 編集

最初のコードはBlockとElementの使い方を分かりやすく見てもらうためにあえてクラス名のみの修正に留めたものです。 マークアップとしてはあまり良くありません。 実際には次のようにするのが無難でしょう。 <a class="icon animation-hover action-hover"> <span class="icon__hamburger_border_top"></span> <span class="icon__hamburger_border_middle"></span> <span class="icon__hamburger_border_bottom"></span> Menu </a> > 今回はハンバーガーのボーダーがないと空っぽのボックスになるので機能しないと思いますが、するとエレメントとなるのでしょうか? ハンバーガーアイコンが消えてもa要素を .button のElementとする必要はありません。 ただ、 .icon というBlockが、Elementが無くなるとアイコンに見えなくなるようなスタイルになっている場合は .icon というクラスは取り除く必要があります。 しかし、可能であれば「ハンバーガーのボーダーが消えても何を表しているのか分かる」というスタイルにしておくのが望ましいです。 言葉だけだと分かり難いと思うので、実例を回答の方に追記しておきます。
退会済みユーザー

退会済みユーザー

2016/03/21 05:19

クラス名をmodal-button-wrapだと他の動きをするボタンにするとおかしくなる拡張性の低いクラス名で、 iconとした場合は動きにかかわらず使えるので拡張性が高いということですね。 ・BEMのブロックについてなのですgあ、下記のようにwapとして、コンテンツを囲むボックスを作ることが良くあると思うのですが、このような囲いはブロックとして考えるべ気なのですかね。 <div class="button button_type_modal"> ・下記などたくさんWRAPがありますが、みんなブロックですかね? <div class="wrap-skew1"> <div class="wrap-skew2"> <div class="content-wrap-widthfull"> <section class="main__about-me"> <div class="widthmax-content-wrap translate3d-to-upper-left"> <h2 id="js-gmap" class="widthmax-heading2 heading2">MAP</h2> </div> <div class="gmap-wrap"> <div id="gmap"></div> </div> </section><!-- /#about --> </div> </div> </div>
flat

2016/03/22 12:16

> クラス名をmodal-button-wrapだと他の動きをするボタンにするとおかしくなる拡張性の低いクラス名で、iconとした場合は動きにかかわらず使えるので拡張性が高いということですね。 .icon に相当するクラスは .modal-button-wrap__button です。 .modal-button-wrap__button というクラスを与えていた要素の構造はアイコンという汎用性の高いものであるため、ElementとするよりはBlockとして粒度を細かくした方が汎用性も拡張性も得られるという考えです。 「何をBlockにすると良いのか」と悩む時は、ひとつの基準として「同じ構造や定義が3回出てきたらコンポーネント化する」という事を意識すると、より判断しやすくなると思います。 .modal-button-wrap については命名そのものに対する改善です。 これもボタンという汎用性の高い要素なので「modal-button」という用途を限定してしまう命名をするよりも .button_type_modal としてModifierでタイプを切り替えた方が使い勝手が良くなります。 これは <button> 要素の type属性 の使い方がそのまま参考になりますね。 > BEMのブロックについてなのですgあ、下記のようにwapとして、コンテンツを囲むボックスを作ることが良くあると思うのですが、このような囲いはブロックとして考えるべ気なのですかね。 <div class="button button_type_modal"> これはラッパーではなく「ボタン」です。 ボタンとアイコンを構造的に分離したので、これは「ボタン(.modal-button-wrap__button)のラッパー」ではなく「ボタンそのもの」です。 つまり「ボタンの中にアイコンがある」のであって「便宜上 .button と命名したラッパーの中にアイコンがある」わけではありません。 また、回答に追記した例では見た目に分かりやすくするためにそれ自体がボタンの様にも見えるデザインになっていますが、実際にはボタンのようなデザインは .button 側で行います。 > 下記などたくさんWRAPがありますが、みんなブロックですかね? それがBEMであれば .main__about-me 以外はBlockですね。 ちなみに、追記したコードは「画像ファイルやフォントファイルでアイコンを表示していて、アイコンが読み込まれなかった時のユーザビリティを確保するために代替テキストを表示させたい」という場面では使えるかもしれませんが、今回のように外部リソースで表示させていない場合には意味はないので、本当に参考程度に見ておいてください。 それと、勉強熱心なのは結構な事なのですが、解決済みとした上でコメントで繰り返し回答を求めるのは止めましょう。 新しい質問は個別に作成するようにしましょう。 理解出来ていないのであれば、解決済みとせずにそのまま質問を続けましょう。 質問がより具体的になれば、回答者もそれに合わせて回答を書き直すでしょう。 また、別の新しい回答者が現れて、もっと分かりやすい回答をするかもしれません。 それによってあなたの理解はより深まるはずです。 そして、それは同じ疑問を持つ別の誰かにとっても、より有益な情報となるでしょう。
退会済みユーザー

退会済みユーザー

2016/03/23 08:14

下記のような所はWEBサイト制作の実務を行っているようですが、下記のようなところで、在宅の就労移行か、サイト制作を下請けとして受けるという形での就労をやっていませんでしょうか? http://jobs2015.jp/ http://heart-full.org/about.html http://llcterrace.com/officeinfo/ https://www.hellowork.go.jp/servicef/139520.do?screenId=139520&action=commonDetailInfo&kyujinNumber1=40180&kyujinNumber2=%0A00968461&kyushokuNumber1Hidden=&kyushokuNumber2Hidden= ・ 下記がボタンではなく <a class="icon animation-hover action-hover"> <span class="icon__shape icon__shape_type_hamburger-top"></span> <span class="icon__shape icon__shape_type_hamburger-middle"></span> <span class="icon__shape icon__shape_type_hamburger-bottom"></span>Menu</a> 下記全体がボタンで <div class="button button_type_modal"> <a class="icon animation-hover action-hover"> <span class="icon__shape icon__shape_type_hamburger-top"></span> <span class="icon__shape icon__shape_type_hamburger-middle"></span> <span class="icon__shape icon__shape_type_hamburger-bottom"></span>Menu</a> </div> ・<div class="button button_type_modal">について button_type_modalのtypeは種類という意味で使っているのでしょうか? 私は下記のようにkindを使っているのですが、typeの方が現場では多いでしょうか? <dt><label for="inquiry-form__comment-box">コメント</label></dt> <dd class="inquiry-form__input-box_kind_textarea"><textarea class="inquiry-form__body" name="body" placeholder="お時間があれば、具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd> >> それと、勉強熱心なのは結構な事なのですが、解決済みとした上でコメントで繰り返し回答を求めるのは止めましょう。 新しい質問は個別に作成するようにしましょう。 理解出来ていないのであれば、解決済みとせずにそのまま質問を続けましょう。 質問がより具体的になれば、回答者もそれに合わせて回答を書き直すでしょう。 また、別の新しい回答者が現れて、もっと分かりやすい回答をするかもしれません。 それによってあなたの理解はより深まるはずです。 そして、それは同じ疑問を持つ別の誰かにとっても、より有益な情報となるでしょう。 早めにBAにしたのは悪気ではありません。 普通は早くBAをもらえれば、うれしいと思いますが、そのような方もいるのですね。
flat

2016/03/23 13:50 編集

> 下記のような所はWEBサイト制作の実務を行っているようですが、下記のようなところで、在宅の就労移行か、サイト制作を下請けとして受けるという形での就労をやっていませんでしょうか? このコメント欄で質問するよりも新しい質問を作成した方が良いと思います。 ただ、プログラムの問題とは関係ないので恐らく評価を下げられたり、ここで質問するのは適切ではないと言われるでしょう。 そのような質問は別のQ&Aコミュニティなどですることをおすすめします。 > button_type_modalのtypeは種類という意味で使っているのでしょうか? そうです。 > 私は下記のようにkindを使っているのですが、typeの方が現場では多いでしょうか? typeはBEMの公式ページにも使われていますね。 しかし、それがBlock・Element・Modifierのどれであっても、その意味を適切に表しているのであればtypeに限定する必要はありません。 ただ、汎用性の高い言葉を選んでおくと「ここに使うModifierは何だったかな?」と迷う事が減ると思います。 > 早めにBAにしたのは悪気ではありません。 それは理解しています。 私はあなたを責めているわけではなく、あなたに助言と提案をしているのです。 > 普通は早くBAをもらえれば、うれしいと思いますが、そのような方もいるのですね。 私がコメントした内容は助言と提案であり、嬉しいかどうかという話ではありません。 「解決済みの質問」と「未解決の質問」があった時、回答者はわざわざ「解決済みの質問」を見に行くでしょうか? 解決済みの質問を見る回答者が全くいないとは言いませんが「解決済みという事はもう回答する必要がないのだから見ない」という人も少なからずいるのではないでしょうか。 例えば売り尽くしセールと銘打って広告を出した商店が、在庫がまだまだあるにも関わらず「大好評につき全品売り切れました」という実態と異なる張り紙を店先に貼っても機会損失にしかならないですよね? つまり、質問内容が解決していないのに解決済みとしても、新たな回答を得る機会が失われるだけだという話です。 新たな回答があれば、もっと良い回答を得られる可能性も高くなります。 そうして得られた回答は、質問者であるあなた自身のみならず、同じ問題を抱える第三者にとっても、より良い回答を見た別の回答者にとっても、そしてteratailというコミュニティにとっても有益なものとなるはずです。
guest

0

BEMのブロック、エレメント、モデファイアの原則的な考え方は、こちらの公式ドキュメントで図解されていますので、一度ご覧になることをお勧めします。(とても解りやすいイラストがあります)

ブロックとは何かということについて、概ね以下のように説明されています。

  • ブロックはページ内で論理的、機能的に独立した構成要素である。
  • ブロックは再利用(繰り返しを含む)可能である。
  • ブロックはページのどこにでも移動できる(移動しても機能やデザインが崩れない)
  • ブロックは他のブロックを内包できる(入れ子構造にできる)

またエレメントについては、上記のブロックとの対比として次のように書かれています。

  • エレメントはブロックの構成要素であり、ブロックの外に出すことはできない(外に出すと機能やデザインが大きく崩れたり、意味を失ったりする)

ブロックとエレメントの線引きについては、上記の説明とイラストが参考になるのではないでしょうか。

ご質問にあるHTMLについてですが、外側の <div> の目的が何であるかによって <a> をブロックとするかエレメントとするかが変わってくると思います。
例えば、<div> が本来リンクグループを意味しているが現時点でたまたま <a> が一つしかない、という場合 <a> は独立したブロックと考えてよいと思います。
そうではなく、<div> が内側の <a> をデザイン的、機能的に補間するためのものである場合(例えばリンクに背景画像を表示するための座布団になっている、あるいは何かの視覚効果を与える役割を持っているというような場合)、<div><a>は常にセットで取り扱われるべきですから、<a> はエレメントとして位置づけられるべきと思います。

ご参考になれば。

投稿2016/03/18 10:39

編集2016/03/18 10:52
tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/03/18 13:19

https://jsfiddle.net/80od313c/1/ 具体例をお見せしたほうが良かったですね。 上記のとおり、ハンバーガーボタンとその大枠となっております。
退会済みユーザー

退会済みユーザー

2016/03/19 04:12

ブロックはページ内で論理的、機能的に独立した構成要素である。 ブロックは再利用(繰り返しを含む)可能である。 ブロックはページのどこにでも移動できる(移動しても機能やデザインが崩れない) ブロックは他のブロックを内包できる(入れ子構造にできる) 上記のような説明が日本語訳されたサイトにありませんでした。 日本語ですべてを翻訳したサイトはないのですかね。 また上記サンプルのようなドロワーメニューの場合は、 wrapがブロックになりspanのハンバーガーの線三つがエレメントになるのでしょうか? spanのハンバーガーの線三つがほかのところにあったらおかしい気もします。 線三つがほかのものを入れることはできません。 wrapはほかのものを入れることができます。
tkanda

2016/03/19 05:01

> 上記のような説明が日本語訳されたサイトにありませんでした。 最初の回答に提示した公式サイトはお読みになりましたか?私が列挙した特徴については、公式サイトのドキュメントでは明らかに、簡潔に説明されていることですので、そちらをご参照されることをお勧めします。
退会済みユーザー

退会済みユーザー

2016/03/20 02:19

>>> ブロックはページ内で論理的、機能的に独立した構成要素である こちらは呼んだことはありますが、 https://github.com/juno/bem-methodology-ja/blob/master/definitions.md 上記は記載はないですよ。 エレメントは、ブロックの一部分であり特定の働きを持つ。 エレメントは文脈依存であり、そのエレメントが属するブロック内でのみ意味をなす。 英語では読めないのが普通です。 英語で読めるのが当たり前と思っているのでは?
tkanda

2016/03/20 16:13

質問者さんが参照されている日本語ドキュメントに何が書いてあるのかは存じませんが、公式の英文ドキュメントの一番最初のセンテンスとその抄訳を記して終わりにさせていただきます。 > BLOCK A logically and functionally independent page component, ブロック、それは論理的に、そしてページ内で機能的に独立したコンポーネントです、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問