Add example of composing about jss

[kof]

Its basically this http://jsstyles.github.io/jss/examples/namespace/index.html

Cascading is not used at all, so composing is not problem.

[OliverJAsh]

Your slides have a DOM tree such as:

component-a
    button
    component-b
        button

component-b is not encapsulated, hence it inherits parent rules.

How does JSS solve this? Can you provide an example?

[kof]

I see there is a basic misunderstanding, will add a composition example.

If you use "named" option when creating stylesheet https://github.com/jsstyles/jss#create-style-sheet classes are generated by jss. Then you use them on every element, there are no cascading styles in use.

Does it makes sense?

[kof]

Composition is a problem only when cascading styles are used.

[OliverJAsh]

I think "cascade" is a bit of an overloaded term. According to the spec, the cascade is specificity + source order.

The problem here seems to be the lack of component encapsulation. Personally I would refrain from using the term "cascade" to describe this problem because that's not the official definition of the CSS cascade. The cascade is how CSS assigns weighting to rules.

Perhaps I'm wrong, but that's how the spec reads to me.

[kof]

You are absolutely right in terms of cascade definition. However it seems like I used this term correctly. Because the solution is - to not to rely on specifity or source order + avoid collisions by using unique generated classes. Its not a true encapsulation but it fixes the problem.

The idea is to not to have more than 1 class on 1 element. CSS rules reuse happens before static stylesheets are generated.

Do you agree?

[OliverJAsh]

An example of the nested class scenario (as per the slides) would help me understand.

[kof]

.jss-0 { 
    background: red;
}
.jss-1 { 
    color: green;
}

<component-a>
    <button class="jss-0">Button A</button>
    <component-b>
        <button class="jss-1">Button B</button>
    </component-b>
</component-a>

[OliverJAsh]

Thanks. What's the JS source code that produces that? An example in the repo would be good.

[OliverJAsh]

… the solution is - to not to rely on specificity or source order + avoid collisions by using unique generated classes.

The collision in this example is not a consequence of specificity or source order (thereby the cascade). You could increase specificity on either of the rules, or you could re-arrange the source order, and no change would occur. Rather, the conflict is a consequence of the lack of encapsulation. This problem will be addressed by shadow DOM in the forthcoming web components spec.

[kof]

The collision in this example is not a consequence of specificity or source order (thereby the cascade).

Sure, unique generated classes is just a way to avoid collisions in css namespace, as we have just one. If we have components written by different people, there is no simple way to avoid this. Even being very specific e.g. using BEM is still very good possible to get collision.

[kof]

So basically there are 2 problems collisions and cascades which are solved this way.

[OliverJAsh]

Thanks for adding the example.

[kof]

This problem will be addressed by shadow DOM in the forthcoming web components spec.

Right now there are still lots of discussions about scoped styles. Its been even removed from chrome.