Comments on: Nested Media Queries https://css-tricks.com/nested-media-queries/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Sun, 21 Nov 2021 08:07:35 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: irunatbullets https://css-tricks.com/nested-media-queries/#comment-1785999 Sun, 21 Nov 2021 08:07:35 +0000 https://css-tricks.com/?p=334168#comment-1785999 I’ve taken a couple of years off from code but have just started a new project where I wanted too try a few new ways to develop. Instead of reaching for scss, I’ve landed on postcss-preset-env which includes the draft spec mentioned in Chris’ post.

It allows me to write this (which also includes custom-media types)

.foo-bar {
  @media (--medium) {
    ...
  }
}

Which is pretty incredible. Perhaps one day I’ll be able to remove the post processor step and my code will still work – I guess we’ll see!

]]> By: Jakob https://css-tricks.com/nested-media-queries/#comment-1768359 Wed, 10 Feb 2021 15:20:26 +0000 https://css-tricks.com/?p=334168#comment-1768359 One thing I wish CSS did natively (which I currently do in sass) is to support media queries to be nested inside selectors, like so

.foo-bar { 
    @media (min-width: 800px) {
        ...
    }
}

It flips the logic around to “The .foo-bar element has styles when view is more than 800px” vs “When the view is more than 800px, the elements within (including .foo-bar) have these styles”

A lot of times I see a behemoth media query that has literally every style adjustment for any selector in that screen size. When you have to move code around, you may leave some parts behind. Containing it this way makes the code more modular, every style for that element is contained in one parent bracket pair.

]]>