Comments (14)
Its basically this http://jsstyles.github.io/jss/examples/namespace/index.html
Cascading is not used at all, so composing is not problem.
from jss.
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?
from jss.
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?
from jss.
Composition is a problem only when cascading styles are used.
from jss.
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.
from jss.
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?
from jss.
An example of the nested class scenario (as per the slides) would help me understand.
from jss.
.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>
from jss.
Thanks. What's the JS source code that produces that? An example in the repo would be good.
from jss.
… 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.
from jss.
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.
from jss.
So basically there are 2 problems collisions and cascades which are solved this way.
from jss.
Thanks for adding the example.
from jss.
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.
from jss.
Related Issues (20)
- [cli] stdout is not a tty HOT 1
- get error msg in Micro-frontend environment: Cannot read properties of null (reading 'cssRules') HOT 3
- Support @container query HOT 9
- dynamic css issue under a certain condition since version 10.9.1-alpha.1 HOT 2
- Support @layer property HOT 2
- Re-rendering root node breaks dynamic styles HOT 10
- Docs are not able to load github's markdown files
- Bug with react-jss compilation: "Warning: [JSS] Rule is not linked. Missing sheet option "link: true"."
- TypeError: Cannot read properties of null (reading 'deleteRule')
- JSS for Preact
- React strict mode forces dynamic rules to be added twice which breaks hydration
- Code Execution Error after Applying Content Security Policy (CSP)
- Style block un-renders when any param used - since v10.0 HOT 1
- `react-jss` dynamic rules memory leak in strict mode
- StyleSheet.replaceRule does not replace media query rules
- How should i assign a counters() to the content property?
- Add specific id or data-tag to the style element injected in head?
- Reference another stylesheet
- Wrong order for generated nested styles
- [react-jss] not support `next` app router mode
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jss.