Search code examples
csscss-selectorsbem

list in list in BEM


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>

Solution

  • 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).