SCSS Nesting Question

Hi SCSS Peeps! I'm trying to get in the habit of writing better cleaner SCSS, and I need some feedback.

Given the following (simplified) mix-in to generate media queries in SCSS:

@mixin breakpoint($point) {
    @if $point==desktop {
        @media (min-width: 70em) {
            @content ;
        }
    }
}

Example A

Do you nest a Parent and Child selector like this:

.parent {

    // Parent Mobile Styles

    .child {
        // Child Mobile Styles
    }

    @include breakpoint(desktop) {

        // Parent Desktop Stlyes

        .child {
            // Child Desktop Styles
        }
    }
}

Example B

or like this:

.parent {
    // Parent Mobile Styles

    @include breakpoint(desktop) {
        // Parent Desktop Styles 
    }

    .child {
        // Child Mobile Styles

        @include breakpoint(desktop) {
            // Parent Desktop Styles
        }
    }
}

Or something totally different? One of my problems is I need to pick one way to handle media queries and stick with it. Any suggestions?

Comments

[Chris Coyier]

This seems more like a bigger philosophical question on whether you want to be writing mobile-first (min-width) styles or desktop-first (max-width) styles. There probably is no right or wrong answer to that, other than that people sometimes treat mobile/small screen as an afterthought and forcing yourself to think about that styling first can be beneficial.

Sass is maybe just an implementation detail regarding that.

What I thought of when I saw the Sass nature of this post was HOW/WHERE you nest those media queries. I sometimes struggle with when to split it up and when the combine. Like...

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

   .child-2 {
        @include breakpoint(desktop) {
        }
    }

}

Versus

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}

[Jack Harner 🚀]

First off, THE Chris Coyier?! I'm humbled. Your examples definitely better explains what I was trying to ask. I definitely subscribe to mobile first, although I do struggle with actually doing mobile "first" design.

As I'm thinking about it, it makes more modular sense to have the breakpoints inside the individual components instead of grouping components inside an individual breakpoint.

[Dinesh Pandiyan]

I'd prefer to take advantage of scss nesting.

Example A, if written in plain css would look like this

.parent {

// Parent Mobile Styles

}

.parent .child {

// Child Mobile Styles

}


@include breakpoint(desktop) { // actual css code for this breakpoint
  .parent {

  // Parent Mobile Styles

  }

  .parent .child {

  // Child Mobile Styles

  }
}

The advantage scss has over css is, you can compose nested styles without having to write the parent class selector (or the same class selector) multiple times (concise and readable code). In that context, Example B is a better way to write as your code as you write your class selector only once and all the relevant style definitions are composed into it at one place (styles and breakpoint specific styles).

Example B

.parent {
// all parent style definitions are contained in one place
// Parent Mobile Styles

  @include breakpoint(desktop) {
    // Parent Desktop Styles 
  }

  .child {
    // all child style definitions are contained in one place

    @include breakpoint(desktop) {
      // Parent Desktop Styles
    }
  }
}

[Jack Harner 🚀]

That's definitely what I'm learning toward, the more that I'm thinking about it. Each component gets it's own breakpoint specific style, instead of grouping a bunch of components to one breakpoint.