Насколько плохо на практике накладывать селекторы в SASS / SCSS?
У меня есть файл .scss, который, помимо прочего, содержит это:
nav {
font-size: 0;
ul {
margin: $padding/3;
}
li {
z-index: 10;
position: relative;
display: inline-block;
font-size: $fontSize;
/**
* If we want separated, Uncomment!
margin: $padding/3;
@include border-radius(5px);
*/
&:first-child {
@include border-radius(0 5px 5px 0);
}
&:last-child {
@include border-radius(5px 0 0 5px);
}
padding: $padding/3 0;
@include background(linear-gradient(lighten($textColor, 10%), $textColor));
border: 1px solid lighten($textColor, 20%);
a {
color: $brightColor;
padding: $padding/3 $padding;
font-weight: bold;
text-decoration: none;
@include transition(.2s all);
}
//Nested menues
ul {
opacity: 0;
//display: none;
position: absolute;
margin: 0;
top: 0;
left: 0;
right: 0;
z-index: 5;
pointer-events: none;
@include transition(.2s all);
li {
@include background(linear-gradient(darken($brightColor, 10%), darken($brightColor, 30%)));
display: block;
border: 1px solid lighten($textColor, 20%);
&:first-child {
@include border-radius(0);
}
&:last-child {
@include border-radius(0 0 5px 5px);
}
a {
color: $textColor;
}
}
}
&:hover ul {
pointer-events: all;
top: 100%;
opacity: 1;
//display: block;
}
}
}
Насколько это плохо / вредно на практике? Я слышал много разговоров о том, что «не проходи через 3 вложенных селектора!» Но насколько это на самом деле вредно? Влияет ли это на загрузку страниц? Тесты, которые я сделал, говорят «нет», но я что-то упускаю?