Re: [csswg-drafts] [css-nesting-1] Yet another nesting proposal (Option 5) (#7970)

Below is a slightly altered version of [this example from the spec](https://drafts.csswg.org/css-nesting-1/#example-df188c81) _(the difference being `table.colortable td .c` instead of `table.colortable td.c`)_:

```css
table.colortable td {
  text-align:center;
}
table.colortable td .c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}
```

Converted to syntax 5 it –if I’m interpreting things correctly here– becomes this:

```css
@nest table.colortable {
    @nest td {
        & {
            text-align: center;
        }
        .c {
            text-transform: uppercase;
        }
        &:first-child,
        &:first-child + td {
            border: 1px solid black;
        }
    }
    @nest th {
        & {
            text-align: center;
            background: black;
            color: white;
        }
    }
}
```

Actions that were needed:
- I need to prepend `@nest` to parent selectors to enable nesting upon adding a nested selector. This moves my focus away from the original code I pasted in.
- In the existing ruleset, I need to take the existing declarations and wrap them inside a `& { }` upon adding a nested selector.
- To add components to the parent selector, I need to prepend `&`

While doing this:
- I found myself jumping around the code quite  a bit, which is not something I liked.
- I didn’t find this to be highly copy-paste friendly. When I copy a ruleset from somewhere else in my stylesheet to target a child element of `table.colortable  td .c`, I need to make the first two of the three changes listed above:

  ```css
  @nest table.colortable {
      @nest td {
          & {
              text-align: center;
          }
          @nest .c {
             & {
                text-transform: uppercase;
             }
             span {
                color: hotpink;
             }
          }
          &:first-child,
          &:first-child + td {
              border: 1px solid black;
          }
      }
      @nest th {
          & {
              text-align: center;
              background: black;
              color: white;
          }
      }
  }
  ```

Furthermore, with this fifth proposal, I noticed:
- Declarations are sometimes in a `& { }` block and sometimes not. This is not consistent.
- Selectors are sometimes prefixed with `@nest` and sometimes not. This feels redundant, as the intent to nest was already there when I pasted in the nested ruleset.

Comparing this to proposal 3:
- There I can paste it my copied content, and _maybe_ need to add an `& `, depending on the selector.
    - Furthermore: as there’s no harm in always adding the `& `, I don’t really need to worry about this _maybe_ and can simply always add it if I wanted.
- Declarations are consistent, as long as they come first.

```css
table.colortable {
    & td {
        text-align: center;
        .c {
            text-transform: uppercase;
            & span {
              color: hotpink;
           }
        }
        &:first-child,
        &:first-child + td {
            border: 1px solid black;
        }
    }
    & th {
        text-align: center;
        background: black;
        color: white;
    }
}
```

This last code example –using proposal 3– is imo much more consistent than the proposal 5 version.

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


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

Received on Thursday, 1 December 2022 06:28:58 UTC