具有用于区分组件的属性的手动css模块

Question

场景

我试图通过使用自定义属性component来区分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之前，我想问你我是否遗漏了某些东西或者过度思考问题。

Answer 1

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

 [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> 

Answer 2

您可以遵循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> 

Answer 3

看看这些，

我没有像你这样的经历，但也许它会帮助你。

小提琴： 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;
}