zooks

Ужасная верстка.
Для таких элементов лучше использовать flex, а не inline-block.

Уже столько лет верстаю, но не понимаю зачем придумали делать табуляцию в выходном файле. Иногда натыкаюсь на такие в проектах. Файл должен быть минифицирован, а к нему приложена карта .map, чтобы при просмотре исходного кода в браузере можно было восстановить переносы строк.

Bootstrap — дешевка. Собственно если серьезный проект не опасается выглядеть дешевкой, то можно смело использовать. Лично я бы выбрал SASS + БЭМ.

30em, 48em, 64em

Мое мнение - нужно хорошо знать основы HTML5.
CSS вместе с адаптивной, в принципе, для бекенда не нужны.

В Safari телефонные номера помечаются ссылкой.

Выбрать SASS.
Экономия времени, с препроцессорами можно больше сделать. Более структурированный код. Миксины и плейсхолдеры. Автоматическая простановка префиксов с помощью autoprefixer.

Нормальный способ - делать именно через
<input type="number">
А стрелки можно легко убрать:
stackoverflow.com/questions/3790935/can-i-hide-the...

Если походить к вопросу серьезно, то для увеличения зп нужно спросить босса.

А JavaScript, имхо, - это отдельная тема. Да, работодатель хочет, чтобы работник был "и швец и жнец и на дуде игрец". Чтобы в штате не было вакансии JavaScript-программера, а все делал HTML-верстальщик за зп верстальщика.

Но в принципе нужно расширять свой кругозор в смежные с профессией темы, иначе никак.

@extend нужен для разных классов и плейсхолдеров.
Например, если у вас одинаковое оформление рамки блоков для хедера и футера.

Здесь же всего лишь разная колоризация одних и тех же кнопок. Все уже сделано грамотно и @extend в данном случае не требуется.