These are chat archives for bem/talk

2nd
Mar 2015
ssyz1988
@ssyz1988
Mar 02 2015 14:48
hello,is anyone here?
<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="mediaimg--rev">
<div class="media
body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>
i wonder how should i name the h3 and p element via bem
in bem,b-b-b-e-m is not allowed,but how should i deal with when the hierachy is deep
Alexej Yaroshevich
@zxqfox
Mar 02 2015 14:57
Just something like media__title and media__desc.
ssyz1988
@ssyz1988
Mar 02 2015 14:58
no,the parent element of the h3 element has a class 'media__body',
via bem,the h3 should has a class 'mediabodyalpha'?
if i name it media__title, how to tell the relationship between h3 and its parent?
ssyz1988
@ssyz1988
Mar 02 2015 15:05
@zxqfox
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:06
Just media__alpha then. Block can contain a lot of elements inside, but you shouldn't note internal ierarchy in naming.
ssyz1988
@ssyz1988
Mar 02 2015 15:07
well,but can block contain block?
for eg: Block1 contains Block2, how should i name blcok1 and block2
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:18
Sure. ;-)
You just don't need to note all of these in naming.
Even like that:
<div class="block1">
  <div class="block2">
    <div class="block3"></div>
    <div class="block2" title="another block2 instance></div>
  </div>
</div>
Usage of block2 here is similar to deep menu items
ssyz1988
@ssyz1988
Mar 02 2015 15:21
yes, as showed above, how to name them properly
can u name them for me?
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:23

If you talking about your sample, I'd make something like:

<div class="media">
  <img src="logo.png" alt="Foo Corp logo" class="image media__img media__img--rev">
  <div class="media__body">
    <h3 class="media__alpha">Welcome to Foo Corp</h3>
    <p class="media__lede">Foo Corp is the best, seriously!</p>
  </div>
</div>

Note that img has a mix of image block and media__img element with --rev modifier.

ssyz1988
@ssyz1988
Mar 02 2015 15:24
not my sample, your sample
block1...3
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:24
They named properly. Just abstract
Btw, you can look at gitter html sources. True bem inside
ssyz1988
@ssyz1988
Mar 02 2015 15:27
thanks a lot,where can i look at gitter html sources?
gitter? i don not know it
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:28
Something like Ctrl+U ;-) Or via inspector/firebug
ssyz1988
@ssyz1988
Mar 02 2015 15:28
ok..
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:29
Right here: https://gitter.im/bem/talk, if you using native client
ssyz1988
@ssyz1988
Mar 02 2015 15:29
yes,i found it
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:35
You just need to know that Blocks and DOM are different trees. And if elements shouldn't be used outside of blocks (just for consistency troubles, you can use it anyway, but it's not recommended) — DOM nodes with block instances can be nested as any other DOM nodes. Simple example is a table (block) that can be nested inside another table (same block), and can have columns, rows, cells (elements), etc.
ssyz1988
@ssyz1988
Mar 02 2015 15:45
well,thank you.
another question, how to show modifier? someone use _ and some one use --
which one is right?
  • not _
i am wrong ,someone use -
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:48
Both ;-) Use what you like more
ssyz1988
@ssyz1988
Mar 02 2015 15:48
ok
Alexej Yaroshevich
@zxqfox
Mar 02 2015 15:49
One more thing is tools that works atm only with block__elem_mod_val. So if you mind to use bemjson, bemhtml, and enb/bem-tools to build html then better to stick to _
ssyz1988
@ssyz1988
Mar 02 2015 15:50
yeah, thanks a lot
Mike Morici
@himedlooff
Mar 02 2015 22:46
anyone ever run into issues commenting out HTML that has class names using --? For example, <!--<div class="something--something"? Technically this is not a valid comment. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting