相关疑难解决方法(0)

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

给定以下BEM树结构,其中存在五个嵌套级别:

collection-main__features-top__story__byline__author
Run Code Online (Sandbox Code Playgroud)

根据BEM的命名约定,其中一个元素是一个块的一部分,并且在它所属的块之外没有任何意义,命名author该类的正确方法是什么?

由于一个author在语义绑在bylinestory背景,但毫无意义下features-topcollection-main块,什么是最好的BEM的名字吗?

collection-main__author
features-top__author
story__author (best?)
story__byline__author
byline__author
Run Code Online (Sandbox Code Playgroud)

如果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?)
Run Code Online (Sandbox Code Playgroud)

最后,如果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
Run Code Online (Sandbox Code Playgroud)

我们会这样做吗?

story--collection-main--features-bottom__author
Run Code Online (Sandbox Code Playgroud)

必须有更好的选择.

css naming-conventions bem

13
推荐指数
1
解决办法
3110
查看次数

标签 统计

bem ×1

css ×1

naming-conventions ×1