BEMのキー、バリューのつけ方がわかりません。

Question

BEMのキー、バリューのつけ方がわかりません。

場所によって微妙にマージンなどが違うのでモディファイヤーとマルチクラスを使って、
表記しようと思ったのですが、address-footerをaddress_place_footerという形にすればキー、バリューは問題ないでしょうか？

BEMのキー、バリューとは、場所がどこ、色があか、状態が選択されているなど主語と補語、目的語という関係であれば、キーに何を入れても良いということなのでしょうか？

・下記はBEM前

<footer class="footer">
					<ul class="address address-footer">
						<li><a class="address__tel animation-hover action-hover" href="tel:[phone]">TEL&nbsp;080-1111-1111</a></li>
						</ul>
				</footer><!-- /.footer -->

・BEM後

<footer class="footer"> <ul class="address address_place_footer"> <li><a class="address__tel animation-hover action-hover" href="tel:[phone]">TEL&nbsp;080-1111-1111</a></li> </ul> </footer><!-- /.footer -->

Answer 1

<footer class="footer">
    <ul class="footer__address">
        <li><a class="footer__address-tel js-footer__address-tel" href="tel:[phone]">
            TEL&nbsp;080-1111-1111</a>
        </li>
    </ul>
</footer><!-- /.footer -->

こんな感じでいいんじゃないですかね。

JavaScriptで操作することが明確なものは頭にjs-つけてます。

モデファイヤつけるなら、たとえばアニメーションだったら

footer__address-tel--anim-hover

的になるかと。
個人的には

footer__address-tel--hover

でもいいと思うけど。

BEMはカスタマイズして使ってる人も少なくないので、参考までに。
http://tsmd.hateblo.jp/entry/2013/12/12/004059

Comments

[退会済みユーザー]

お返事ありがとうございます。

下記の部分はどうお考えですか？
＞＞＞
BEMのキー、バリューとは、場所がどこ、色があか、状態が選択されているなど主語と補語、目的語という関係であれば、キーに何を入れても良いということなのでしょうか？

[退会済みユーザー]

わかりにくくて恐縮です訂正します。

BEMのキー、バリューとは、場所がどこ、色があか、状態が選択されているなど主語と補語、目的語という関係ということでしょうか？
つまり主語と補語、目的語という関係になっていれば、inquiry-form__input-box_kind_textarea、text_about-bemなどでもOKと考えてよいでしょうか？
例inquiry-form__input-box_kind_textarea
<dd class="inquiry-form__input-box_kind_textarea"><textarea class="inquiry-form__body" name="body" placeholder="お時間があれば、具体的なご用件をお聞かせください。" onclick=”” required></textarea></dd>

[ogaaaan]

『主語と補語、目的語という関係』って言うふうに捉えてないですよ。
とは言え、どう捉えるかは人それぞれなんで、そこは尊重してあえて触れてません。

項目名と値が、キーとバリューです。

場所：新宿
日時：2016年4月4日

とかと一緒なんで。

それに『何を入れても良いのか？』って書いてますけど、好きなもの入れればいいですよ。
もちろんあなたが10人のチームで作業してるなら、残りの9人が理解できるように名付ける必要はあるでしょうが。

[退会済みユーザー]

主語と補語、目的語という関係ではないということですね。

項目名と値ということですが、項目名と値とは、具体的にいうとどういうことでしょうか？
プログラミング項目名と値と入れてもよい情報が出てきません。
値は変数などに入れる文字や数値のようですが、

Answer 2

キー、バリューではなく、
ブロック、エレメント、モディフィアですよ。
それぞれの頭文字をとってBEMなので。

Comments

[退会済みユーザー]

モディファイヤーのキー、バリューについてです。
説明不足でした。

[ogaaaan]

了解っすー！