Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS to Sass Refactoring with Sass Nesting Selectors

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Nesting when?

So 

.main {
   .&-heading {  
     font-size: 5.625rem;
     color: rgba(255, 255, 255, 1);
     text-transform: uppercase;
     font-weight: normal;
     line-height: 1.3; 
     text-shadow: 0 1px 1px rgba(0,0,0,.8);
     margin: 12px 0 0;
   }

   .&-title {
     color: white;
     font-size: 1.625rem;
     letter-spacing: .065em;
     font-weight: 200;
     border-bottom: 2px solid;
     padding-bottom: 10px;
   }

}

This is cool right?

main-heading and main-title

Okay, heading and title, makes sense right?

SO we can do the same if we are making a navigation bar? We can just nest .main-nav and you know how navigations bar are build, we need to select the nav in this case .main-nav, so we can just repeat it with & right? that sgood?

So what if we have e.g.

something that repeats over the whole site, assume we have a parallax page, and we have something to put in center for the whole parallax, but also something else somewhere else, so that nesting woudn't be good?

So the best practice is to nest thing that are related, like primary-heading, primary-paragraph, and or child like the navigation? these are the best right?

1 Answer

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

The only thing I almost ever nest intentionally are puesdo classes.

So,

.navbar-item {
   padding: 10px 15px;

    &:hover {
        color: red;
    }
}

For any other reason, I try to avoid nesting because it creates unnecessary specificity and, it makes components less reusable, which reduces the odds that we are DRY

Now, there starts to be cases on the opposite where a site grows to the point that nesting because a requirement to get something to work. But before you nest, ask yourself if it can work without being nested, and if that's a yes, than don't nest for the sake of nesting.

Let your css naming convention keep concerns separated, not nesting.

I put sass nesting, and !important in the same boat. Sometimes, good developers are forced to used them.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

So I shouldn't really nest. Just pseudo classes.

So a code like 

<nav class="main-nav">
<ul >
            <li class="active"><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Christmas</a></li>
            <li><a href="">Gifts</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Songs</a></li>
            <li><a href="">Contact</a></li>
        </ul>
</nav>

Reusing the main-nav across the ul, li and the anchor , I should avoid that right.

Just the pseudo classes? hover, active 

/* Pseudo-classes ------------------ */

a {
   &:link {
      color: $color-link-default;
      text-decoration: none;
   }

   &:visited {
     color: $color-link-visited;
   }

   &:hover {
     color: rgba($color-link-default, .5);
   }
}
Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

In the context of the videos, do it as they teach. There is value in understanding how nesting works, and what it outputs.

But when you get to the real world, nesting gets messy, fast.

Have you ever tried to override nested boostrap classes? The css becomes so specific it can be difficult, and you're left with very long selectors. Gross.

If you search the internet for blogs or medium articles from active, senior developers, you'll find a lot of opinion pieces on nesting. Find your style, but use nesting responsibly.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yeah, i tried lol they are very long.

Yes, I jumped in the future with the note the teacher gave, and I was just wondering when is the 'best practice' so i don't start tomorrow or whenever practice Sass starting off with bad practices. Since the best way is to be active learner.

So id be careful wit it, and id nest it with pseudo classes at start, once i understand more i might go futher.

Thank you