Допустима ли большая вложенность в SCSS как в SASS, или в SCSS принято придерживаться другого стиля?

Question

[stan288]

Скриншот фрагмента кода удалён модератором.

прохожу курс, сейчас на теме препроцессоров и возник такой вопрос. допустима ли большая вложенность в SCSS, или нужен какой-то другой подход к написанию селекторов? просто препод показывает все на SASS и там большая вложенность выглядит более органично, нежели в SCSS. Обьясните пожалуйста нормально ли так писать в SCSS? Как по мне не совсем читабельно. Может есть какой-то стандарт, или как лично вы пишете селекторы к стилям в SCSS?

Comments

[Анатолий Куликов]

Технически-то такая вложенность допустима, но самое главное - это глаза не сломать с такими длинными названиями.

[stan288]

Анатолий Куликов, я так понял в sass именно так и пишут, а в scss стоит просто как в css писать селекторы без большой вложенности? Ну разве что псевдоклассы вкладывать

[Анатолий Куликов]

stan288, а чем по вашему принципиально различаются sass и scss?

[Анатолий Куликов]

Но я согласен с коллегой, что отметился в ответе, что так лучше не писать.

[WapSter]

.navbar {
  &-top {}
}

у тебя тут отдельный блок затесался вообще. Разницы между SCSS и SASS нет за исключением синтаксиса, как можно прийти к мысли, что есть разница в размере вложенности вообще хз.
За свой опыт верстки пришел к выводу, что блоки и элементы стоит разделять, а не вкладывать. Пример:

.block {
   &--mod {}
}
.block__element {
   &--mod {}
}

В больших проектах проще находить нужные элементы

[Модератор]

Скриншот фрагмента кода удалён модератором. Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

Answer 1

[repcolding]

Нет, что на скриншоте не поддерживаемо. Так писать нужно чуть меньше чем никогда. Повышение специфичности, scoped таким образом плохая практика. Еще вижу bem частичный, так тоже нельзя, &- не поддерживаемо.

Используйте bem, вот подсказка, очень хороший гайд, я был рад что нашел его в свое время, дополняет документацию bem с работой на scss

https://nicothin.pro/idiomatic-pre-CSS/

так понял в sass именно так и пишут

- Нет, что на scss плохой код, то в и sass это плохой код. Это одно и тоже, за исключением {};

Comments

[Анатолий Куликов]

+