DEV Community

Cover image for SCSS Nesting Question
Jack Harner 🚀
Jack Harner 🚀

Posted on

SCSS Nesting Question

#scss #css #discuss #help

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?

Top comments (4)

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 🚀 • • 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
 
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
    }
  }
}
Collapse
 
jackharner profile image
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.

Read next

kaja_uvais_a8691e947dd399 profile image

Create a Infinite Scrolling Marquee with HTML and CSS

Kaja Uvais -

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

gladiatorsbattle profile image

Building a Futuristic Neon Navbar and Hero Section with Advanced Animations 🚀

Gladiators Battle -

dumebii profile image

The Use Of AI In Content Generation

Dumebi Okolo -