Kevin Powell - CommunityKP-C
Kevin Powell - Community3y ago
10 replies
Kiers

CSS Nesting Conventions

Loved the video on nesting, Kevin - really exciting to see the power that might have.

One thing which occurred to me was around the nesting of media queries into other rules:

H1 {
  @media (max-width: 768px) {
    ....
  }
}


I guess this runs the risk of having your breakpoints repeated throughout your CSS file, meaning a bit F&R job if they need adjusting globally. Is it better to keep breakpoint media queries at the top level, and restrict nesting for local overrides?

I did, for a moment, wonder if the media query value could come from a CSS variable - making it possible to define breakpoints once and reuse - but sadly it appears not 😦
Was this page helpful?