[senfiaj]

My top list of recent CSS improvements:

1) Nested selectors.

2) :has(...).

3) :is(...), before you had to write :not(:not(...)).

4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.

[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); } }

[Eric_WVGG]

Mine is text-box: trim. Twenty years of trying to explain to graphic designers why it’s next to impossible possible to get the top of a capital letter to a box, I feel free like a bird.

[k33n]

Once Firefox supports it, we will be golden.

[nilslindemann]

My favorite is @layer

[namuol]

Don’t forget @layer!

[silverwind]

I like 2-4 but I despise nested selectors. They make selectors ungreppable.

[pphysch]

Why/how do you grep selectors? Seems overly optimistic to be able to guess the particular rule pattern that is applying a style. Browser tools are much more reliable.