Re: [csswg-drafts] [css-cascade-6] Enable `revert-layer` layer limiting and fallback values (#10416)

This in some cases would indeed make a difference.

E.g. 2 years ago, when experimenting with Cascade Layers I came up with the idea of the Style Lock / Styling API for Components, what is basically does is it prohibts setting any other property to an element besides the ones allowed.

With that I always need a fallback layer as very first layer to make sure that it doesn't fallback to the UA styles.

```css
// If no value on any layer is found this includes the fallback values
@layer
fallbacks,
organisms,
molecules,
atoms;

@layer fallbacks {
  .button {
    // These are the fallback value in case there needs to be a default for an API
    border: 4px solid blue;
  }
}

@layer atoms {
  .button {
    // Reset all styles to it's initial value
    all: initial;

    // Set own styles
    font: inherit;
    border-radius: 4px;
    background: lavender;
    padding-block: .5rem;
    padding-inline: 1.5rem;
    display: block;

    // API - Tell what can be set from outside
    border: revert-layer; 
    margin: revert-layer;
    outline: revert-layer;
  }
}

@layer molecules {
  .molecule {
    // As no unset is provided all unset inner APIs are exposed
    
    // These can't be overwritten as they are reset / not part of the api
    border-radius: 10px;
    background: red;
    width: 500px;
    height: 100px;

    // This can be overwritten as they are part of the api
    margin: 20px;
    border: 10px solid black;
  }
}

@layer organisms {
  .organism {
    .button {
      // This can be overwritten as they are part of the api
      border: 10px solid red;
    }
  
    .molecule {
      // This can't be overwritten as it is set on molecule and by that not exposed anymore
      border: 10px solid green;
      
      // This can be overwritten as they are part of the api and not set
      outline: 5px solid yellow;
    }
  }
}
```

(https://codepen.io/Quentin_Albert/pen/raNJgxR). I mean this is just an experiment that isn't really pracitical, but I'm pretty sure there are more cases where it would make sense tho. 


-- 
GitHub Notification of comment by Que-tin
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10416#issuecomment-2946299164 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 5 June 2025 21:15:51 UTC