getbem.github.io
getbem.github.io copied to clipboard
BEM in lists
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