extract style > css / css examples about base-element HOT 5 OPEN

For prefixing an approach similar to https://github.com/requireio/wrap-selectors might be interesting, though you say it won't work well when writing out to a file.css. Can you elaborate?

As for the cascading: I think the top level > lower level seems like a good approach. Some level of cascade would be nice though; reset.css-ish styles could be provided by low level components on which higher level components can in turn build. Currently that doesn't work since the component expects a class to exist on the element before css can render.

from base-element.

wrap-selectors looks interesting but I didn't like how you need to use custom syntax @document wrap() { }. I'd prefer if I could just write regular CSS relative to the element and the API would figure out what to do, especially with nested elements. That way existing CSS/compile-to-CSS can be brfs or attached to elements more easily.

you say it won't work well when writing out to a file.css. Can you elaborate?

If the class name is dynamically generated, it will be different upon each initialization. So if previously compiled to a file.css, the selectors localizing to the element will no longer be correct. Besides enforcing a user supplied root class on each element, I'm not sure yet of a better way to solve that.

Some level of cascade would be nice though;

I agree. It would be nice if the element author had some control over how it will cascade. It would also help optimize to avoid selectors like: .my-table .super-table .base-table for deeply nested situations.

My main goal is an elegant alternative to inline styles. Elements provide an overridable static style for a separately served asset or if the user really wants to avoid the request, an inline nonce'd style tag. Then do element.style[key] = val for all dynamic styles. That way I can disable inline style outright in my CSP.

from base-element.

It appears webpack is also scoping css: https://github.com/markdalgleish/postcss-local-scope. Not sure I like their non-standard :global syntax though. Also doesn't deal with cascading styles. Ghmmh, gonna ponder a little on this.

from base-element.

I agree. Let me know if you come up with more options for us to try. I moved the attachCSS stuff into it's own module: https://github.com/shama/attach-css

from base-element.

Opened an issue about this on attach-css - shama/attach-css#1

from base-element.