getbem.github.io icon indicating copy to clipboard operation
getbem.github.io copied to clipboard

BEM in lists

Open alfupe opened this issue 9 years ago • 0 comments

Let's say we have a very simple block:

<ul class="list-unstyled">
    <li>one</li>
    <li>two</li>
    <li>...</li>
    <li>ten</li>
</ul>

So the css could be:

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

But, what should be done if we would like to let some padding to every single list item? I suppose that according to the BEM good practices should be something like:

<ul class="list-unstyled">
    <li class="list-unstyled__item">one</li>
    <li class="list-unstyled__item">two</li>
    <li class="list-unstyled__item">...</li>
    <li class="list-unstyled__item">ten</li>
</ul>

So the css should be:

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-unstyled__item {
    padding-bottom: 10px;
}

My questions are: Is it so dangerous to add a modifier to the block and style the <li> directly? for instance:

<ul class="list-unstyled list-unstyled--roomy">
    <li>one</li>
    <li>two</li>
    <li>...</li>
    <li>ten</li>
</ul>

And then:

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-unstyled--roomy li {
    padding-bottom: 10px;
}

Is it necessary to add the class="list-unstyled__item"? Do not you think that's excessive?

Thanks

alfupe avatar Oct 03 '16 14:10 alfupe