Manuel css-modülleri özel bir özellik <code>component</code> kullanarak ben bileşenler arasında ayrım çalışıyorum bileşenleri

Question

senaryo

ayırt etmek. Örnek:

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

Şekillendirici bu kolaydır:

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

İşte

sorun zor kısmıdır.

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

Komple örnek

Bu bare example geçerli: bileşenler yan etkilerini oluşturmaz emin olmak için, bir alt bileşeni olduğu şey stil olmamalıdır. Dış bileşen için yapıyı ve şekillendirmeyi tanımlar.

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

İşte ilk yaklaşım

bir first naive approach olduğunu.

Bazı mantıksal sorunları var, ama ne yapmaya çalıştığım fikrini aldığınızı düşünüyorum.

Duygularım, bunun saf css ile mümkün olmamasıdır. Ama özel Javascript yazmadan önce, bir şey mi kaçırdığımı veya problemi gözden kaçırdığımı sormak istedim. Bunlara

Answer 1

bakış,

senin gibi deneyimli değilim ama belki size yardımcı olacaktır.

keman: 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; 
} 

Answer 2

Eğer parçaların güvenilir beklenen yapınız varsa, neden >direct child selector kullanmıyorsun?

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

DÜZENLEME:

hiçbir componenet belirtilirse ebeveyn stilleri miras yuva bileşenlerine istiyorsanız, böyle bir yaklaşım işe yarayabilecek - İlk yaklaşımına dayalı . Bunun çalışması için B bileşeni ve A için stiller belirtmeniz gerekir.

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 3

Sen takip edebilir BEM convention: Geliyor

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