给定以下BEM树结构,其中存在五个嵌套级别:
collection-main__features-top__story__byline__author
根据BEM的命名约定,其中元素是块的一部分,而在其所属的块之外没有任何意义,命名
author
类的正确方法是什么?由于
author
在语义上与byline
和story
上下文相关联,但是在features-top
和collection-main
块下毫无意义,因此最佳BEM名称是什么?collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author
如果引入了新的
features
块会怎样?collection-main__features-top__story__byline__author (target)
collection-main__features-bottom__story__byline__author
features-top__story__author
story--features-top__author (best?)
最后,如果添加了另一个
collection
块,并且我们想要设置列表中第二个author元素的样式,会发生什么?collection-main__features-top__story__byline__author
collection-main__features-bottom__story__byline__author (target)
collection-sub__features-top__story__byline__author
collection-sub__features-bottom__story__byline__author
我们会做这样的事情吗?
story--collection-main--features-bottom__author
必须有一个更好的选择。
最佳答案
BEM禁止在CSS元素中放置元素!
您在BEM标记中犯了最典型的错误-编写block__element__element
。
您必须创建新的块,而不是复制DOM树。
例如:
正确的HTML:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>
</div>
正确的CSS:
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
如果您需要使一个元素成为一个元素,那么就需要制作一个新的块或使用单个嵌套元素来使您的bem-tree!
错误:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem1__elem2'></div>
</div>
</div>
权利#1:建立新方块
<div class='block1'>
<div class='block2'>
<div class='block2__elem'></div>
</div>
</div>
正确#2:使用单个嵌套元素制作bem树
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
</div>
注意-您不能将元素放在CSS的元素中,但是可以并且应该将元素放入html! DOM树和BEM树可以不同。
不要写奇怪的名字,把元素的名字放在块的名字里!
错误:
.block {}
.block-elem1 {}
.block-elem1__elem2 {}
因为尝试移动块时遇到奇数名称问题,所以:
<div class='other-block'>
<div class='block-elem1'></div>
</div>
嵌套的html元素是DOM树。
您编写的类的名称是BEM树。
感到不同!
DOM树:
<ul>
<li>
<a>
<span></span>
</a>
</li>
</ul>
.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
BEM树:
<ul class="menu">
<li class="menu__item">
<a class="menu__link">
<span class="menu__text"></span>
</a>
</li>
</ul>
.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
参考文献:
元素是块的一部分!不属于元素!
阅读BEM方法论的作者Vitaly Harisov:https://twitter.com/harisov/status/403421669974618112
另请阅读:
网络 session WebCamp:前端开发人员日上有一个有关此主题的报告(俄语):https://www.youtube.com/watch?v=kBgHdSOj33A
+幻灯片:http://ihorzenich.github.io/talks/2015/frontendweekend-bem/