Comment by jjcm

big +1 on #1.

As a tip - most LLMs are unaware it exists due to either knowledge cutoff or not having enough training data for it.

As a recommendation, include some examples of it in your AGENTS.md. Here's what I use:

--------------------------------------

## CSS nesting (required) When writing CSS (including component `css()` strings and `soci-frontend/soci.css`), *use modern CSS nesting* where it improves readability and reduces repetition.

- Prefer nesting with the `&` selector for pseudo-classes / pseudo-elements and compound selectors. - Avoid duplicating the parent selector when nesting can express it once. - Reference: [MDN `&` nesting selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/S...)

### Quick reference

#### Pseudo-classes / no-whitespace attachment

```css .button { color: var(--text);

  &:hover {
    color: var(--text-secondary);
  }

} ```

#### Pseudo-elements

```css .fade { position: relative;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
  }

} ```

#### Descendant nesting (whitespace implied)

```css .card { padding: 12px;

  .title {
    font-weight: 600;
  }

} ```

#### “Reverse context” (`.featured .card`) using `&`

```css .card { .featured & { border-color: var(--brand-color); } }