В общем, суть вся в том, что если ты применяешь БЭМ, все эти бесконечные block block__el block__el_m, велик соблазн написать вот так:
.block {
стили блока
&__el {
стили элемента
&_m {
стили модификатора для элемента
}
}
}
Пока всё хорошо. Теперь добавь сюда реальных стилей и ещё с пяток элементов, у нас же SCSS, в нём это так просто:
.block {
стили блока
стили блока
стили блока
стили блока
&__el {
стили элемента
стили элемента
стили элемента
стили элемента
&_m {
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
}
}
&__el2 {
стили элемента
&_m2 {
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
}
&_m3 {
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
стили модификатора для элемента
}
}
&__el3 {
стили элемента
стили элемента
стили элемента
стили элемента
стили элемента
&_m4 {
стили модификатора для элемента
}
&_m5 {
стили модификатора для элемента
}
}
}
И через 2-3 блока и ещё пару вложений ты перестаёшь понимать, где находишься. Добавить сюда немного псевдоклассов, псевдоблоков — и всё становится совсем плохо.
Чтобы этого не происходило, не надо лениться набирать названия классов вручную. Автоподстановка в любимом редакторе поможет и подскажет. Потраченные секунды сейчас — это сэкономленные десятки минут на отладку, казалось бы, простой вёрстки.
Думаю, можно читать согласно вложенности и именно по ней и понимать: где ты находишься. Если уж трудновато, то 1-м вложенным элементам можно прописывать вместо & полное название селектора.