如何使用BEM正确设置元素的范围？

鉴于以下BEM树结构，设有五个嵌套级别存在：如何使用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

必须有更好的选择。

来源

2015-01-12 Eric Xu

请显示您的数据输出。是否像 '{collection-main：[{“feature-item”：{story：{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 {}

如果你需要做一个元素的元素，那么你需要一个新的块或用一个嵌套元素制作你的贝姆树！

WRONG：

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem1__elem2'></div> 
    </div> 
</div>

RIGHT＃1：创建一个新的块

<div class='block1'> 
    <div class='block2'> 
     <div class='block2__elem'></div> 
    </div> 
</div>

RIGHT＃2：请您BEM-树一个嵌套元素

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
</div>

注意 - 你不能将元素放入CSS中的元素，但你可以n并且应该将元素放入html元素中！ DOM树和BEM树可以不同。

不要写出奇怪的名字，把元素名称放在块的名字中！

WRONG：

.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 {}

参考文献：

“的元件是一个块的组成部分，不能使用在它之外。“ https://en.bem.info/methodology/key-concepts/#element

元素是块的一部分！不是元素的一部分！读维塔利Harisov，BEM-方法论作者：https://twitter.com/harisov/status/403421669974618112

类名，如“block__elem__elem___elem”是指编码不明白在什么BEM。

阅读也：

有一个网络会议WebCamp报告（俄罗斯）：前端开发人员日这个话题：https://www.youtube.com/watch?v=kBgHdSOj33A +幻灯片：http://ihorzenich.github.io/talks/2015/frontendweekend-bem/

来源

2015-01-12 11:07:12

另请参阅：http://www.sitepoint.com/working-bem-scale-advice-top-developers/ –

如何使用BEM正确设置元素的范围？

回答

相关问题