Am I doing too much nesting in SCSS ?

&__secondary {
&__link-list {
display: inline-block;
vertical-align: middle;
line-height: 1em;

@media screen and (min-width: $breakpoint-lg) {
margin-top: 1rem;
width: auto;
}

&__item {
font-size: 0.875rem;
line-height: 1.5;
font-weight: bold;
margin-right: 1em;

@media screen and (min-width: $breakpoint-lg) {
display: inline-block;
margin-bottom: 0;
}
}
}

&__signature {
text-align: left;

@media screen and (min-width: $breakpoint-md) {
float: right;
width: auto;
margin-left: 3em;
margin-top: 1rem;
}

&__logo {
float: right;
display: inline-block;
vertical-align: middle;
}

&__label {
margin-left: 0;
margin-right: 1em;
font-size: 0.875rem;
line-height: 1.5;
font-weight: bold;

@media screen and (min-width: $breakpoint-md) {
margin-left: 0;
margin-right: 1em;
}
}
}
&__secondary {
&__link-list {
display: inline-block;
vertical-align: middle;
line-height: 1em;

@media screen and (min-width: $breakpoint-lg) {
margin-top: 1rem;
width: auto;
}

&__item {
font-size: 0.875rem;
line-height: 1.5;
font-weight: bold;
margin-right: 1em;

@media screen and (min-width: $breakpoint-lg) {
display: inline-block;
margin-bottom: 0;
}
}
}

&__signature {
text-align: left;

@media screen and (min-width: $breakpoint-md) {
float: right;
width: auto;
margin-left: 3em;
margin-top: 1rem;
}

&__logo {
float: right;
display: inline-block;
vertical-align: middle;
}

&__label {
margin-left: 0;
margin-right: 1em;
font-size: 0.875rem;
line-height: 1.5;
font-weight: bold;

@media screen and (min-width: $breakpoint-md) {
margin-left: 0;
margin-right: 1em;
}
}
}
2 Replies
Mert Efe
Mert Efe14mo ago
is this normal practice or am I overextending parent selection?
Joao
Joao14mo ago
I'm pretty sure it's one of those things that is personal preference, but I rather not have more than one level of nesting, two at the very most. As mentioned in the documentation itself: Keep those selectors shallow! https://sass-lang.com/documentation/style-rules#nesting