Question

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

在班级名称中指定父母
在选择器中指定父级（使用LESS嵌套规则）

和相应的HTML：

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

第二种方法：

<div class="dashboard">
   <span class="title"></span>
   <div class="custom-widget">
        <span class="title"></span>
   </div>
</div>

我想在.title内为.dashboard指定特定样式，因此使用第一种方法CSS将如下所示：

.dashboard__title {
    //styles here
}

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

.dashboard .title {
    //styles here
}

利用了LESS嵌套功能：

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

我们非常喜欢第二种方法，因为它可以通过折叠特定于任何特定元素的规则来轻松阅读LESS样式表，并且还允许使用简短的样式名称。但是，它有一个问题，即级联 - 在.title内为.dashboard定义的手头样式也将应用于.title内的.custom-widget。如果我们使用第一种方法，那么就不会发生。

请就如何使用LESS嵌套功能提出建议，但要避免所描述的问题。

修改：

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

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

制作这类课程：

.custom-widget__save-icon--active

Answer 1

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

.dashboard > .title {
    //styles here
}

Answer 2

我认为这个问题有点含糊不清，因为没有“这样做”可以回答。但某种推理有望提供一些提示。我认为你应该自己提出的第一个问题是：span.title是否恰好出现在其他地方，以便可以重复使用它的样式规则。

在这种情况下，您可以通过抽象样式定义开始：

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

这样，通过添加第二个类，您可以利用CSS的级联性质以及LESS或SASS等工具，您可以保证样式规则的顺序将被保留。

否则，如果您只是想确保您的样式规则仅适用于.plugin__container内的元素，只需将其范围与问题中的范围相同，并注意最外面的»主要入口点«是唯一的够了。

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

我希望它有所帮助！祝你好运！

使用LESS嵌套规则时，阻止样式通过级联应用

2 个答案: