getbem.github.io
getbem.github.io copied to clipboard
Elements must be unique inside his block?
Some authors say we don't have to have elements with the same name within his block, they say those must be treated like an ID, which means not to have the same name, but I have seen too many cases like this (They use the "navigation-bar-list__list-item" class many times):
<header class="main-header">
<nav class="navigation-bar">
<ul class="navigation-bar-list">
<li class="navigation-bar-list__list-item"></li>
<li class="navigation-bar-list__list-item"></li>
<li class="navigation-bar-list__list-item"></li>
</ul>
</nav>
</header>
^How do you handle this?
I thinks that BEM tree is right, but I don't know if is valid to don't to fall in DRY in CSS properties (in the below case for no repeating CSS properties):
<header class="main-header">
<nav class="navigation-bar">
<ul class="navigation-bar-list">
<li class="navigation-bar-list__list-item-1"></li>
<li class="navigation-bar-list__list-item-2"></li>
<li class="navigation-bar-list__list-item-3"></li>
</ul>
</nav>
</header>
According this video: video "Elements must be unique inside his block"
There's just no reason for treating elements as IDs. You may use as many elements with the same name as you wish.