手动css模块带有属性以区分组件

Manual css-modules with attributes to distinguish components

本文关键字：组件 属性 css 模块 手动      更新时间：2024-05-10

场景

我正在尝试使用自定义属性component来区分组件。示例：

<div component="A">
  <span>Hello</span>
</div>

造型很简单：

[component=A] span {
  color: red;
}

问题

这是棘手的部分。为了确保组件不会产生副作用，它不应该对子组件中的任何东西进行样式化：

<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

完整示例

这是一个的简单示例。它定义了外部零部件的结构和样式。

HTML

<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>

CSS

[component=A] :not([component]) span {
  color: red;
}

第一种方法

这里有一个第一个天真的方法。

它有几个逻辑问题，但我想你已经明白我想做什么了

我的感觉是，这在纯css中是不可能的。但在编写自定义Javascript之前，我想问你我是否遗漏了什么或想得太多了。

如果您的组件有一个可靠的预期结构，为什么不使用>直接子选择器？

[component="A"] > span {
  color: red;
}
<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

编辑：

如果您想在没有指定组件集的情况下嵌套继承父样式的组件，那么这样的方法可能会起作用——基于您的初始方法。为此，您需要指定组件B和A的样式。

https://codepen.io/anon/pen/wGyeMg

body {
  font-size: 20px;
}
[component=A] > span,
[component=A] div:not([component]) > span {
  color: red;
}
[component=B] > span,
[component=B] div:not([component]) > span {
  color: black;
}
<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>

您可以遵循BEM约定：

.a {
  /* component A */
}
.a__red {
  /* element red child of component A */
  color: red;
}
.b {
  /* component B */
}
.b__black {
  /* element black child of component B */
  color: black;
}
<div class="a">
  <span class="a__red">Component A (red)</span>
  <div>
    <span class="a__red">Component A (red)</span>
  </div>
  <div class="b">
    <span class="b__black">Subcomponent B (black)</span>
    <div>
      <span class="b__black">Subcomponent B (black)</span>
    </div>
    <div class="a">
      <span class="a__red">Subcomponent A (red)</span>
    </div>
  </div>
  <span class="a__red">Component A (red)</span>
</div>

看看这些，

我不像你那样经验丰富，但也许这会对你有所帮助。

小提琴：https://jsfiddle.net/eua98tqa/2/

HTML:

<div component="A">
 <span>This should be styled by component=A styles</span>
 <div component="B">
   <span>This should NOT be styled by component=A styles</span>
 </div>
</div>

CSS：

[component=A] span{
  color: red;
}
[component=B]  span{
  color: BLUE;
}
相关文章：