-
ID:uKp3ow さんの質問

よーしオジさん今日も質問しちゃうぞー。優しく教えてね？
HTML5だとaタグも親要素次第でaタグ内にいろんな要素をぶっこんでもOKな仕様になったみたいなんだけど、それに伴い、以下のパターンAとパターンBのマークアップが可能になったと思う。それぞれのパターンの使い訳とかメリット、デメリットを教えて下さい。ホントにお願いします！

パターンA
<ul class="segmentedControl">
<li class="segmentedControl_item">
<a href="">メニュー1</a>
</li>
<li class="segmentedControl_item">
<a href="">メニュー2</a>
</li>
</ul>

パターンB
<ul class="segmentedControl">
<a href="">
<li class="segmentedControl_item">メニュー1</li>
</a>
<a href="">
<li class="segmentedControl_item">メニュー2</li>
</a>
</ul>

みんなの回答 4 件

ID:.bm8R/ さんの回答

aの下にdivとか入れてもよくなったのは確かだけど、パターンBはだめです。いくらaがtransparentだといっても、ulの中に入れていいのはli, script, templateだけだと仕様で定められているので。
ID:uKp3ow

うっ。ホントですね。。。www.w3.org/TR/html-markup/ul.html

ID:8Zg1Oo

同意。ulの直下にli以外はダメです。

ID:uKp3ow

ちょっと出直してきます！！

ID:euPHTG

15へぇ～！

ID:4p2FvV さんの回答

どうでも良いんだけど、なんでローキャメルケースとアンダーバー式を混合させてるの？
ID:uKp3ow

BEMでググってくだしゃい！

ID:fTZ6Z3

BEMだからって混在はさせないだろ。。

ID:uKp3ow

BEMな時点でスネークケース( _ )もチェインケース( - )も混在してるんだがw キャメルだけ仲間外れはいかんだろ！

ID:4p2FvV

BEMは明確な理由があってそうしてるんだけど。
てか、トピ主のは_が1つなんだからBEMになってないし。

ID:uKp3ow

_2つ書かなくても意味分かるから自分の書き方で書いてるだけよ。チームでコード共有する訳じゃないからね〜。てか、オレだって明確な理由があってキャメルケース使ってるわい！contact_form__submit_button--largeって書くよりcontactForm_submitButton--largeの方が視認性高いと思うんだけどな〜。

ID:4p2FvV

いや、それはBEMを間違った解釈してる。なんでも繋げればいいんじゃない。
<form class="contact-form">
<input type="submit" class="contact-form__submit">
※ボタンとテキストでの送信を想定するならbuttonを付けてもいいが、そんなケースは稀だろ。
※モジュール化を重視するなら「large-submit-button」でも良いが。
.
でいいじゃん。
--は状態を表すが、大きさは形状だろ。「大きい送信ボタン」なんだから単語でいい。--を使うなら「submit-button--on」とか「submit-button--off」とかだろ。
.
お前の「contactForm_submitButton--large」は31文字だが、俺のは20文字だ。「お問い合わせ」「フォーム」にある、「送信」と処理も明確だ。

ID:PDw6Ve さんの回答

オジさんだから教えてあげない！
ID:uKp3ow

何歳からオジさんなんだよ？いってみやがれってんだw

ID:aVNg1R さんの回答

バターンBが論外なのでこのトピは閉じて良いと思います
ID:cKLRN1

閉店ガラガラ

最終更新日:2016-02-05 (1,543 views)

関連するトピックス

ページ上部に戻る