【新機能】作り忘れたまとめはありませんか?31日前まで期間指定してまとめが作れる高度な検索ができました。有料APIだからツイートの漏れはありません!
7
ログインして広告を非表示にする
闇鍋 @_346_ 2013-10-02 16:39:47
前にも BEM の話で疑問に挙げたけど、.foo のクラスを持つ見出しモジュールがあったとして、見出しの横にリンクがついたりすると .foo の親要素として div 等が必要になるわけだけど、その時、BEM の視点からその div にクラスをつけるとしたらどうすべきなのか? と。
llama @roatnek 2013-10-02 16:41:37
@_346_ そのdivが.fooになって.fooだったものが.foo__elementになる。見出しの横に付いたりするリンク(fooのelement)はあったりなかったりするけどそれでいいと思う。
llama @roatnek 2013-10-02 16:43:57
BEMは、というかああいう厳密なネーミングルールはJavaScriptから触るとすごく便利。でもそのちょっとしたメリットのために「すべてに名前を付ける罰ゲーム」をやらなあかんのは割に合わんのが実感。
闇鍋 @_346_ 2013-10-02 16:44:39
@roatnek てことは div を用いない場合でも、div.foo はあるものとして、見出しモジュールには .foo__element ってつけるってこと?
Kotaro Kokubo @kotarok 2013-10-02 16:46:01
@_346_ 今流行ってる BEM 的にどうなのかはわからないけど、昔 BEM 的なことやってた時には .has-link みたいなのつけてましたね。BEM 的には ***_haslink みたいな modifier になるんですかね。
闇鍋 @_346_ 2013-10-02 16:48:15
@kotarok 最初から div.hdg > hn.hdg__body みたいな定義にしておいて、div.hdg.hdg--haslink ってことになるんでしょうかね。
llama @roatnek 2013-10-02 16:48:28
@_346_ ん? そのdivって当初は包含ブロックとしてのdivだったところを格上げして、そいつをblockにして.fooと定義し、かつて見出し+blockだった.fooは.foo_headingとかのelementになって、っていうことやで?
闇鍋 @_346_ 2013-10-02 16:49:50
@roatnek てことは、div.foo > hn.foo__elem と hn.foo が同じスタイルを持つってことだよね? なんかそれってバカっぽくない? 無駄っつーか。
Kotaro Kokubo @kotarok 2013-10-02 16:53:25
@_346_ あ、ごめんなさい。そもそもの問題を誤読してました。
llama @roatnek 2013-10-02 16:54:59
そんなことより.fooに.foo__buttonと.foo__linkがあって、それらをいじるmodifierが必要なら.foo__button--disabledと.foo__link--disabledを定義しろっていうのがBEMの教え、ていう理解でいいのかな?
闇鍋 @_346_ 2013-10-02 16:55:13
もっぺん言います。hn.foo という見出しモジュールを定義しました。hn.foo は Block です。で、この hn.foo を div で包含する必要が出てきました。その時の div と hn のクラス名を答えよ。
llama @roatnek 2013-10-02 16:55:23
つまり、.foo--disabledに属するセレクタで各elementのスタイルをマージしたら殺されるっていう理解
llama @roatnek 2013-10-02 16:56:44
@_346_ バカっぽい。そこはSassで補ってる。extendとか。ていうかBEMって厳密に従うとかなり冗長でバカっぽい感触。
闇鍋 @_346_ 2013-10-02 16:56:59
俺の答えは div.foo > hn.foo__elem で、div を持たない場合でも「一時的に div が無くなってるものとして」hn.foo__elem とすべきなんじゃないかと。div があってもなくても hn.foo__elem にしておく。
llama @roatnek 2013-10-02 16:58:00
blockはなくなっちゃいかんだろ。
闇鍋 @_346_ 2013-10-02 16:59:14
「このモジュール、なんで .foo__elem から始まってるんですか?」って突っ込まれても、「.foo はみんなの心の中にあるんだよ」と答える。
llama @roatnek 2013-10-02 16:59:31
elementがあったりなかったりしてもいいが、blockに包含されてないelementっていうのは構造上有り得ないやろ。というかそういう構造は認めようがないやろ。BEMツリーを考えたら。
闇鍋 @_346_ 2013-10-02 16:59:46
@roatnek いいんだよ、心の中にはあるんだから。
llama @roatnek 2013-10-02 17:01:58
BEMはただのネーミングルールじゃなくて(そこだけを拝借してもいいとは思うけど)BEMツリーっていうツリー構造を「みんな」が順守することで様々なソフトウェア的メリットが生まれるという開発手法だと理解しているので、ツリーに矛盾を与えるような例外はダメ絶対だと考えてる
闇鍋 @_346_ 2013-10-02 17:05:40
だからって div.foo > hn.foo__elem と hn.foo が同じスタイルだから二度書きましょうねってそりゃアンタどうかしてんじゃあねえのかって思うぜ。Sass でなんとかそれっぽくまとめられるだろうけど。
llama @roatnek 2013-10-02 17:06:59
@_346_ どうかしてると思いながら書いてるぜ! ああ気が狂いそうさ!!!
闇鍋 @_346_ 2013-10-02 17:08:49
それかもう最初から要不要に関わらず、div.foo で包含しておくかかなあ。それはそれで HTML 側が冗長になるので問題だよなあ。
llama @roatnek 2013-10-02 17:09:12
普通に考えてメリットの半分も受けられないので、わたくしとしては今後「厳密BEM」をやることはないでしょう。それを体感するためだけの本案件での採用であったわけやし。思った通りの部分と思った通り以上の部分といろいろデータが得られたので、これを元にまた違った俺スタイルを進めていく所存。
llama @roatnek 2013-10-02 17:10:17
@_346_ なるよなるよ冗長のかたまりで気が狂いそう胃が痛くなる。あとで呼ぶかどうかわからんやつにも名前を先につけておくんやぞ、どんだけコスト高いねん思うわ。
残りを読む(51)

ブックマークしたタグ

あなたの好きなタグをブックマークしておこう!話題のまとめを見逃さなくなります。

コメント

***************** 三宅龍太郞 @MIYAKE_ryutaro 2013-10-03 08:17:40
「見出しの横にリンク」が附くって何? 普通の文書では無いと思ふけれども……。見出しをリンクにする、なら解る。或は、見出しの次にリンクを含む文章が続く、なら解る。いづれにしても凝った事をしようとするからイレギュラーな方法を採らざるを得なくなる訣で、以下、よく解らないウェブ制作の話が続いてゐる。
***************** 三宅龍太郞 @MIYAKE_ryutaro 2013-10-03 08:18:02
DIV や class は(已むを得ない場合を除いて)原則として使はないのが基本。何故なら、HTML に於いてマーク付けは「おまけ」。中でも class 属性は「ごみ」。任意または恣意の値なので通常のパーザでは解析不能だからです。見た目の CSS に使へる程度。
***************** 三宅龍太郞 @MIYAKE_ryutaro 2013-10-03 08:18:30
最近の HTML5 では何うなってゐるのか知りません。
***************** 三宅龍太郞 @MIYAKE_ryutaro 2013-10-03 08:19:38
いづれにしても凝った事をしない方が良い。
ログインして広告を非表示にする
ログインして広告を非表示にする