Html 使用嵌套较少的规则时，防止样式按级联应用

我们正在开发一个基于插件的大型前端系统，并试图找出如何编写CSS规则。基本上有两种方式：

在类名中指定父类

在选择器中指定父项（通过使用嵌套较少的规则）

以及相应的HTML：

<div class="dashboard">
   <span class="dashboard__title"></span>
   <div class="custom-widget">
        <span class="dashboard__custom-widget__title"></span>
   </div>
</div>

使用第二种方法，CSS将如下所示：

.dashboard .title {
    //styles here
}

它利用了较少的嵌套功能：

.dashboard {
 .title {
   //styles here
 }
}

我们非常喜欢第二种方法，因为它通过折叠特定于任何特定元素的规则，使得样式表不那么容易阅读，而且它还允许短样式名。但是，它有一个问题，那就是层叠-在为

定义的手边样式中。title

内部

。dashboard

也将应用于

。title

内部

。自定义小部件

。如果我们使用第一种方法，这种情况就不会发生

请提供有关如何使用较少嵌套功能但避免所述问题的建议

编辑：

我似乎找到了一个结合了两种方法的解决方案：

.custom-widget {
  &__save-icon {
    &--active {
      padding: 777px;
      background-image : url('');
    }
  }
}

生成这种类型的类：

.custom-widget__save-icon--active

---

我认为这个问题有点模棱两可，因为没有“那样做”可能的答案但是一些推理可能会给出一些提示。我认为你应该问自己的第一个问题是：

span.title

是否也会出现在其他地方，以便可以重用它的样式规则

在本例中，您可以从以下方式抽象样式定义开始：

.dashboard__title {
    //styles here
}

html:

<div class="plugin dashboard">
   <span class="title">Hey There!</span>
</div>

scss:

//general rules for each title in each plugin
div.plugin {
    span.title {
    }
}

//override or specify
div.dashboard {
    span.title {
    }
}

---

我希望有帮助！祝你好运

只需通过选择器选择元素，如下所示： 此样式仅影响具有class.title的.dashboard元素的直接子元素

.dashboard > .title {
    //styles here
}

---

您可以使用

.dashboard>.title

。您需要使用子选择器而不是子选择器。编辑中的解决方案似乎针对的html与您在问题中给出的不同（即，没有.b-flume-widget\uuuu save-icon--active）。对于你的问题，最简单的解决办法是，正如@anpsmn（现在还有其他人）所说的，针对

。title

是

的直接子对象。dashboard

@henry，是的，不同，很抱歉。以直接儿童为目标不是一个好主意，因为我将用直接儿童选择器编写几乎所有的选择器，但这当然是一个选项。为了未来的读者，你能改写一下吗？不仅对你有用的答案不适用于所写的问题，而且在重读时我看到你认为（思考？

.dashboard.title{…}

在CSS或更少中不同于

.dashboard{.title{…}

在更少中。事实并非如此：它们是等价的。如果他们给了你不同的结果，我想我已经找到了解决办法，请看我更新的答案。

div.plugin-namespace {
    //all your rules here…
}

.dashboard > .title {
    //styles here
}