DEV Community

loading...
Cover image for SCSS Nesting Question

SCSS Nesting Question

Jack Harner πŸš€
I'm Jack! I'm a Freelance Developer. I have experience with WordPress, Shopify, BigCommerce, React, Linux Admin, & More! Ask Me Anything!!
・1 min read

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 ;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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?

Discussion (5)

Collapse
chriscoyier profile image
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 {
    }

}
Collapse
jackharner profile image
Jack Harner πŸš€ Author • Edited

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.

Collapse
adasomg profile image
AdaΕ› • Edited

I don't have a strong opinion on this, but I'd say B is easier to be consistent about and more predictable.
With more nesting levels and breakpoints sticking to A is hard.

.parent {
    @include breakpoint(1) {}
    @include breakpoint(2) {}
    .child {
    @include breakpoint(1) {}
    @include breakpoint(2) {}
    @include breakpoint(3) {}
    .grandchild {
        @include breakpoint(1) {}
        @include breakpoint(2) {}
        @include breakpoint(3) {}
    }
    }
}

vs

.parent {
    .child {
      @include breakpoint(3) {
           .grandchild {}}}

    @include breakpoint(1) {
    .child {
        .grandchild{}}}

    @include breakpoint(2) {
    .child {
        .grandchild {}}}
}
Collapse
jackharner profile image
Jack Harner πŸš€ Author

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.

Collapse
flexdinesh profile image
Dinesh Pandiyan • Edited

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
    }
  }
}