Дк вроде уже ни в одной статье писалось, что цепочки селекторов это зло. Не столько с эстетической сколько с практической точки зрения.

1. Если тебе где-то нужно переопределить стили в каком-то отдельном контексте придеться такую же длинную цепочку фигачить.
2. Ну и размер файла стилей это не уменьшает.
3. Плюс дополнительные элементы цепочки это лишние циклы поиска браузером соответствии элементов в ДОМ структуре, что ест ресурс. Одна цепочка может не заметна, но полчища таких цепочек уверен могут показать существенную разницу.
4. Потом браузер ведь читает справа налево. В .navbar .navbar-right-menu li.notify-dropdown .notify-list li a .notify-body он сначало найдет все .notify-body, потом начнет проверять какие из них вложены в тег a и искать будет до самого верхнего эелемента пока не найдет или не упреться в бади. Потом начент проверять а какие из них лежат внутри списка li и тд. Куча ненужных обработок.
5. В этом же ключе стоит упомянуть, что селекторы в идеале все должны быть классами. А селекторы теги типа a, li, p, span и тд нужно избегать потому что они неспецифичны, не несут большой ценности, создают лишние цыклы обхода дерева элементов. По той же причине нельзя использовать селектор *.

В идеале вообще не должно быть вложенных селекторов. Почитай про БЕМ методологию. https://ru.bem.info/methodology/ Максимум 2 в крайних случаях три уровня вложенности.

Приходилось работать тупо с jpg. Надо ли говорить, что много неудобств. Ни размер шрифта нормально посмотреть, ни какие-то графические элементы в отдельную картинку получить без наложения других элементов страницы.

Скорее всего говорят о таких сервисах типа https://zeplin.io/ На последнем проекте дизайнер в него выкладывал как дизайны страниц так и сборки например всех возможных стилей кнопок, инпутов. Все это шариться. Идея ок. Во многом удобно. Показывает размеры, цвета. Позволяет определенные элементы скачать в виде отдельного файла. Но было нужно измерить какое-то растояние которое сервис сам не показывает. И непонятно что делать. Бывало нужно было иконку сукачать и нужно было просить дизайнера чтоб он что-то там в настройках сделал чтоб иконка стала скачиваемым элементом. Короче есть минусы, но идея ок. И это не один такой сервис. Думаю через пару лет большинство через них работать и будет.

Потому что клик по ссылке по умолчанию обрабатывается браузером как инструкция для перехода по ссылке. Что вроде бы очевидно) Для отмены действий по умолчанию традиционно ипсользуется конструкция event.preventDefault(); где event объект события. Обработчик события ( в данном случае change ) получает его первым аргументом: function change(event) {...} И возможно стоит сделать фоллбек для старых версий эксплорера event = event || window.event который объект события не передает и значение его можно получить из глобального объекта.

Очевидно событие по умолчанию отрабатывает в конце - после того как все пользовательские обработчики события закончили свое выполнение. Иначе как бы event.preventDefault() мог остановить событие после его выполнения. А значит на момент выполнения действия по умолчанию функция change уже установила аттрибут href. Вроде так

Ну не делайте тогда кнопку неактивной, а лишь имитируйте ее неактивность каким-то дополнительным классом стилей. А в callAlert вызывайте e.preventDefault()