Its contained scopes but remain simple to override on a higher layer. Define portions of a component on different cascade layers so it can influence.wrapper, toggle buttons, etc) don’tĪffect its child contents, but it can influence the appearance of text within. Define parts of a component with an inner bound and parts of it without, so.Here are just a few ideas that I’ll certainly be experimenting with: I think this will be as big as custom properties or even flexbox and grid.
I can’t even imagine all the new ways we’ll be able to structure our code. (though there are still use-cases for Shadow DOM, of course). If you’ve ever used the shadow DOM to isolate styles but it was too heavy-handed, If you’ve rolled out complex BEM class name systems and fought to keepĪll your selector specificities equal, think of the freedom Prevent class name collisions, I hope you can see the benefit this offers. If you’ve developed large-scale apps and had to rely on CSS-in-JS libraries to It gives you the most control, rather than leaving you beholden Or, you can apply an inner scope bound to the outer scope to keep it from happening.Īfter experimenting with scope for a bit, this feels to me like the right balance. To give one component - or just parts of one component - precedence over another. Selector takes precedence, regardless which scope it belongs to.Īnd when you don’t want this behavior, you have a few ways to prevent it. You can tweak selector specificities so the higher-specificity Instead of the inner scope always winning, You maintain control over which takes precedence. This way, when two scopes target the same element, Specificity than the inner one, the outer scope’s styles will apply.ĭuring the development of the specification,īut - to the surprise of my past self - I think it’s the right call.
Still takes precedence, so if the outer scope targets an element with higher You can inspect this in DevTools and see each scope overriding the other,īased on which one has the closest proximity: In this case, the inner scope always takes precedence: I’m green I’m blue I’m blue But I’m green Īnd here’s a working demo - Note this currently only works in Chrome with theĮxperimental Web Platform Features flag turned on in These have no inner scope bound, so both p selectors target It all starts with the rule and a selector, like this: (.card ) The inner component’s styles will override those of the outer component. If two components target the same element (with the same specificity), You will not need BEM-style classnames anymore.įurthermore, proximity becomes a first-class citizen in the cascade. In a child component - or you can allow them reach in, if that’s what you need. You can stop selectors from one component from targeting elements title selector that only works in an Accordion. title selector that only works within a Card component,Īnd a separate. Scoped styles allow you to contain a set of styles within a single component The ability for one set of styles to override another based on proximity.More control over which selectors target which elements (i.e.There are two key things scope brings to CSS: We just need a little interest from the community to entice otherīrowsers to build their implementations and kick this over the finish line. One of the top features on my CSS wishlist was on the chopping block,Īnd it’s so much better than the previous version.Įven better, the W3C spec is mostly stable,Īnd there’s a working prototype in Chrome now. Several years ago, I made a plea to save scoped CSS. here is the html code: Īnd down here is the css style. I'm using bootstrap accordion and font awesome and i created custom icon with it so when the tab is closed it gets the closed icon and when it is opened it get the other icon. But you can make this work only using css. This is a good solution but when using the first tab opened it gets a little messy.
0 kommentar(er)
