我试图围绕BEM在CSS中命名,我想知道我是否正确理解它。
根据官方文档,元素是:
块的一部分,没有独立的含义,并且在语义上与其块相关联。
鉴于下面的代码片段,.main-nav
的子项没有任何独立含义,所以我相信它们都符合元素的要求。
但是,当我最终得到像.main-nav__sub-menu-item-link
这样的类名时,我不禁感到有些代码味道。感觉就像我仍然在我的元素名称空间内嵌套了几层深层。
也许这是完全可以的,下面的例子是正确的实现,我只是欣赏第二个意见。
<nav class="main-nav">
<div class="main-nav__logo">
<a class="main-nav__logo-link">Company Name</a>
</div>
<ul class="main-nav__menu">
<li class="main-nav__menu-item">
<a class="main-nav__menu-item-link">Products</a>
<ul class="main-nav__sub-menu">
<li class="main-nav__sub-menu-item">
<a class="main-nav__sub-menu-item-link">Foo</a>
</li>
<li class="main-nav__sub-menu-item">
<a class="main-nav__sub-menu-item-link">Bar</a>
</li>
<li class="main-nav__sub-menu-item">
<a class="main-nav__sub-menu-item-link">Baz</a>
</li>
</ul>
</li>
<li class="main-nav__menu-item">
<a class="main-nav__menu-item-link">Services</a>
</li>
<li class="main-nav__menu-item">
<a class="main-nav__menu-item-link">About Us</a>
</li>
</ul>
</nav>
这确实很好。
CSS中缺少作用域的问题在您的标记中得到解决。选择特异性不会增加。所以请保持原样。
并且不要害怕长的类名,在gzip之后它与短变体一样。