用 HTML 编写 BEM 样式的更好方法答案

【问题标题】：A better way to write BEM style in HTML用 HTML 编写 BEM 样式的更好方法
【发布时间】：2015-12-18 14:29:44
【问题描述】：

假设我正在创建一个组件“组件”及其子级或修饰符。 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 中，我会严格在 Component 范围内编写 _child 类，因此没有任何全局 _child 类。

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

【问题讨论】：

我认为这种方法的一个缺点是您必须依赖嵌套 CSS，这可能会产生与特异性相关的问题。
如果_child类超过3-4级。我仍然可以把它拿出来写成 CSS 中的二级类。例如：组件 { _child{} ）。我觉得可能会有一些不便，但不是必要的问题。你能举出具体的例子来说明你的担忧吗？
这可能是一个小问题，但如果您（或其他人）想要更改 _child 的样式，他们必须记住在选择器前面加上 Component。更大的担忧是，除了 Component 之外，您将无法在其他任何地方使用 _child，这将限制其在其他任何地方重用的能力。
如果你坚持使用类选择器并原子地组合你的类，这种方法可能会奏效。
组件的想法不是更具体，不让子类在组件之外使用吗？

标签： html css class classname bem

【解决方案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! */
}

【讨论】：

是的，正在尝试自己更新答案。感谢您的回答！