在 HTML 中编写 BEM 样式的更好方法

Question

假设我正在创建一个组件 "Component" 及其子组件或修饰符。 BEM 样式为

<div class="Component Component--modifier">
 <div class="Component__child"></div>
</div>

I'd like write it as this way
<div class="Component Component--modifier">
 <div class="_child"></div>
</div>

在 CSS 中，我会严格地将 _child class 写在组件范围内，因此没有任何全局 _child class。

我想知道我的风格指南会带来哪些潜在风险或缺点？

Answer 1

你不能。

一个例子：

<div class="MyRoundedBlock MyRoundedBlock--blue">
    <div class="_title"></div>
    <div class="OtherBlock">
        <div class="_title"></div>
    </div> 
</div>

CSS:

.MyRoundedBlock ._title {
    /* This rule applies to your OtherBlock's title too! */
}

在 HTML 中编写 BEM 样式的更好方法

A better way to write BEM style in HTML

html

css

class

classname

bem