• Not exactly seeing that same organic adoption happen as had happened for SASS
• I still use media queries for responsive layouts but tend to reserve them for “bigger” layouts that are made up of assembled containers. Otherwise container-queries is preferred.
• With :is(), specificity is determined not by the main selector but by the most specific selector in its argument list.

  /* Specificity: 0 1 1 */
    :is(ol, .list, ul) li {}
  
    /* Specificity: 0 0 2 */
    ol li {}
  

• Use prefers-reduced-motion to slow everything down when that’s the preference.
• Using css variables with color-functions is a powerful idea:

  :root {
    /* Primary Color HSL */
    --h: 21deg;
    --s: 100%;
    --l: 50%;
    
    --color-primary: hsl(var(--h) var(--s) var(--l) / 1);
    }
  
  .bg-color {
    background: var(--color-primary);
    }
  
  .bg-color--secondary {
    --h: 56deg;
    background: hsl(var(--h) var(--s) var(--l) / 1);
    }
  

Source: https://www.smashingmagazine.com/2023/07/writing-css-2023/

Units in Media queries

• If your content is mostly image-based, pixels might make the most sense. If your content is mostly text-based, it probably makes more sense to use a relative unit that’s based on text size, like em or ch.

• It’s best to choose your breakpoints based on your content rather than popular device sizes, as those are subject to change with every technology release cycle.

• You can combine media queries so that the styles only apply when all the conditions are true.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Source: https://web.dev/learn/design/media-queries/