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 Sass Basics Improve Your Workflow with Sass Nested Selectors

Posted by vamosrope14
vamosrope14
14,932 Points

Does this count as repeated code?

.

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hello

That is not repeated code as the links are targeted depending on different specificity.

When the SCSS is compiled to CSS it will stay have the same rules apply (top to bottom) so your first anchor tag is generic and should always be at the top. More specific ones, i.e. your nav anchors should be below the generic one like you have done there.

I can see you are following the BEM methodology so for me i would actually change the anchor to a named class.

For example:

.nav {
    list-style-type: none;
    padding: 0;
    text-align: center;

    &__item {
        display: block;
        color: inherit;
        padding: 8px 15px;

        &:hover {
            background-color: green; 
        }
    }

    &__link {
        display: block;
        color: inherit;
        padding: 8px 15px;
    }
}

This not only makes your code more flexible, it also keeps your specificity low, which is the whole reason for following a methodology like BEM.