Nested list

Hi,

I am making a structure for list that can be reused in other block elements but I have doubts with the nested items. If you make the sublist elements as a block itself, what would happen with its li elements, do you need to name them according with its father block element or they can be generic?

<ul class="list list--default">
    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
    <li class="list--default__item">
        Lorem ipsum dolor <a href="#" title="link title" target="_self">sit amet</a>
        <ul class="list--default-sublist">
            <li class="list--default__item">
                Lorem ipsum dolor sit amet
                <ul class="list--default-sublist">
                    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
                    <li class="list--default__item">Lorem ipsum dolor sit amet</li>
                </ul>
            </li>
            <li class="list--default__item">Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ul>

Thx a lot.

6 years ago

tadatuta

There are two possible variants.

If nested list homehow differs from its parent, it may be a block itself:

<ul class="list list--default">
    <li class="list__item">Lorem ipsum dolor sit amet</li>
    <li class="list__item">
        Lorem ipsum dolor <a href="#" title="link title" target="_self">sit amet</a>
        <ul class="list-sublist">
            <li class="list-sublist__item">
                Lorem ipsum dolor sit amet
                <ul class="list-sublist">
                    <li class="list-sublist__item">Lorem ipsum dolor sit amet</li>
                    <li class="list-sublist__item">Lorem ipsum dolor sit amet</li>
                </ul>
            </li>
            <li class="list-sublist__item">Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ul>

otherwise just you the same block for nested as well.

But please pay attention that you don't need to have --default in the names of elements.

6 years ago

ghost

Hi @tadatuta,

Ok, I can see. So what about this:

<ul class="list list--default">
    <li class="list__item">Lorem ipsum dolor sit amet</li>
    <li class="list__item">
        Lorem ipsum dolor <a href="#" title="link title" target="_self">sit amet</a>
        <ul class="list-lvl2">
            <li class="list-lvl2__item">
                Lorem ipsum dolor sit amet
                <ul class="list-lvl3">
                    <li class="list-lvl3__item">Lorem ipsum dolor sit amet</li>
                    <li class="list-lvl3__item">Lorem ipsum dolor sit amet</li>
                </ul>
            </li>
            <li class="list__item">Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ul>
<ol class="list list--ordered">
    <li class="list__item">Lorem ipsum dolor sit amet</li>
    <li class="list__item">Lorem ipsum dolor sit amet</li>
</ol>
<dl class="list list--definition">
    <dt class="list--definition-term">Coffee</dt>
    <dd class="list--definition-description">Black hot drink</dd>
    <dt class="list--definition-term">Milk</dt>
    <dd class="list--definition-description">White cold drink</dd>
</dl>

Thanks again.

6 years ago

tadatuta

I'd do it like this:

<ul class="list list--default">
    <li class="list__item">Lorem ipsum dolor sit amet</li>
    <li class="list__item">
        Lorem ipsum dolor <a href="#" title="link title" target="_self">sit amet</a>
        <ul class="list--lvl2">
            <li class="list__item">
                Lorem ipsum dolor sit amet
                <ul class="list--lvl3">
                    <li class="list__item">Lorem ipsum dolor sit amet</li>
                    <li class="list__item">Lorem ipsum dolor sit amet</li>
                </ul>
            </li>
            <li class="list__item">Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ul>
<ol class="list list--ordered">
    <li class="list__item">Lorem ipsum dolor sit amet</li>
    <li class="list__item">Lorem ipsum dolor sit amet</li>
</ol>
<dl class="list list--definition">
    <dt class="list__term">Coffee</dt>
    <dd class="list__description">Black hot drink</dd>
    <dt class="list__term">Milk</dt>
    <dd class="list__description">White cold drink</dd>
</dl>

6 years ago

ghost

Ok, but can a modifier be alone without a block?, I refer about "list--lvl2", "list--lvl3", etc.

What is the rule to use BLOCK or MODIFER inside a father?

6 years ago

tadatuta

you can't use modifier without block classname but you don't need to keep parent's modifier name for its children.

In order to leave a comment you need to login.