[csswg-drafts] [css-cascade] Atomic CSS (#11142)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade] Atomic CSS ==
The cascading nature of CSS is both a blessing and a curse. In many cases, it results in declarations that were meant to be applied together being applied partially, resulting in visual chaos, poor accessibility, or both.

In some ways, that is why `@supports` was invented: for cases where the poorly supported feature needed to be applied together with some well supported features. However, this is not just about browser support.

Consider cases where the background color is overridden but not the text color, or the font size but not the line height, or even things not directly related, such as the `gap` for a button group, but not the border-radius. 
<img width="457" alt="image" src="https://github.com/user-attachments/assets/0bcbe4dc-e702-4e47-9dbd-4d4a43f57308">

It seems to me it would help solve a host of use cases if authors could mark groups of declarations (and possibly even nested rules) as "atomic" (in the same sense as db transactions): if even a single declaration in the group is not applied (either because it was overridden or because something was not supported), then the entire group is no longer applied.

E.g. 

```css
button-group {
 @atomic {
  gap: 0;
  
  > button {
   border-radius: .3em;
  }
 }
}
```

Note that here I’m even setting the `gap` to its initial value, just to opt it in to the atomic-ness.

This would also simplify many `@supports` use cases:

```css
h1 {
 color: var(--color-primary);

 @atomic {
  background: linear-gradient(...);
  background-clip: text;
  color: transparent; 
 }
}
```

instead of the current:

```css
h1 {
 color: var(--color-primary);

 @supports (background-clip: text) {
  background: linear-gradient(...);
  background-clip: text;
  color: transparent; 
 }
}
```

My main worry is circularities: I can't yet see any, but I have an annoying niggling feeling that they may exist. Or strictly defining the concept of a property being overridden.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11142 using your GitHub account


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

Received on Friday, 1 November 2024 17:02:08 UTC