list in list in BEM

Question

I understood block__element--modifier naming rule with BEM methodology.
But how can I name this kind of structure? If you have an nested list in outer list.
How can I name nested ul and li in list block with list__item element?

<ul class="list">
    <li class="list__item">
        <ul>
            <li></li>
            <li></li>
        <ul>    
    <li class="list__item"></li>
    <li class="list__item"></li> 
</ul>

Update (as Dan Rocha's answer)

"Are you talking this?"

<ul class="list">
    <li class="list__item">
        <ul class="list--inner>
            <li class="list__item--inner></li>
            <li class="list__item--inner></li>
        <ul>    
    <li class="list__item"></li>
    <li class="list__item"></li> 
</ul>

score 1 · Accepted Answer · answered Apr 12 '17 at 18:30

1

If nested list should look just the same you can use the same naming for it. And if it's different consider using modifiers/mixes or even absolutely new names (if inner list styling has nothing in common with parent).

answered Apr 12 '17 at 18:30

tadatuta

2,007
11
12

It sounds make sense. Can you confirm my updated question? – wonsuc Apr 14 '17 at 23:51
I'd go for nesting in updated case: `.list--inner .list__item { /* some styles */ }` – tadatuta Apr 15 '17 at 06:50
If inner list item styling has nothing in common with parent then I can use `list__item--inner` ? – wonsuc Apr 19 '17 at 17:55
sure. but that will result in as many additional classes as many items inner list has which is not always handy. – tadatuta Apr 20 '17 at 18:28

score 0 · Answer 2 · answered Apr 13 '17 at 15:15

0

You can do something like list--inner and modify the list__item inside of it if needed

answered Apr 13 '17 at 15:15

Dan Rocha

635
5
16

list in list in BEM

2 Answers2