Сергей delphinpro

сами делаем из otf или ttf в белке

https://jsfiddle.net/shxfzx0a/
https://jsfiddle.net/shxfzx0a/2/

Да, распечатано несколько таких вот листочков, иногда подглядываю. Это быстрее чем лезть в гугл.

или лучше весь код писать с нуля, только руками и в простом блокноте?

бррррр.... аж мурашки по коже!
Ни в коем случае! Сразу учитесь пользоваться правильными инструментами.

где всего этого не будет

и вам там делать нечего :)

стоит ли использовать сразу фреймворки, библиотеки

Использовать их без знания основы будет затруднительно, иногда невозможно. Поэтому основа обязательна к изучению. Особенно это касается javascript.

Оптимизация css - это последнее что нужно оптимизировать, если страница тормозит. Особенно селекторы. Если уж хотите заниматься оптимизацией производительности в css, то изучите, например, свойство will-change

PS. Всеми любимый бутстрап, и другие фреймворки (например Materialize) используют подобный селектор для border-box и не парятся.

https://jsfiddle.net/fbtzf34g/2/

https://jsfiddle.net/e2zy13mq/

Укажите, что изображению нельзя сжиматься - flex-shrink: 0;
В контексте флексбоксов любой элемент ведет себя как флекс блок. Ширина такого блока рассчитывается исходя из содержимого и параметров flex-grow, flex-shrink, flex-basis.
Можно еще использовать для ограничений max-width, min-width, но я считаю, в данном контексте это костыль.

mobile first не зря придумали

Заверните ваши ховеры в медиазапросы

@media (min-width: 1000px) {
  ul li:hover ul { display: block}
}

Чтобы они не работали на мобайлах

retina экран?
физических пикселей в два раза больше, вот картинка и размывается.
Адаптируем графику под Retina экран

Причепите css transition на бэкграунд. Кривыми Безье в тайминг-функции подберите оптимальный эффект вспышки.
Переключайте из скрипта присвоением/удалением класса.

Минифицированный файл для увеличения скорости загрузки страницы. Именно он должен использоваться на боевом сайте. Не минифицированный файл подключается на dev-сервере в процессе разработки. Это касается минифицированных файлов в целом. Файлы собираются системой сборки (gulp/grunt/webpack). После окончания разработки дается команда создать сжатый файл и он создается.

В случае бутстрапа используйте минифицированный, если вы не планируете вносить в него изменения и не минифицированный в противном случае.

Не нужно плодить классы (select2, b-price-item-2 и т.п.). Манипулируйте блоком как единым компонентом, и тогда вы сможете создавать их любое количество не трогая больше css- и js-код

https://jsfiddle.net/r731hnd0/1/

codepen.io/anon/pen/rLwXZo

Use DevTools, Luke!

Открываем консольку и смотрим, почему ваши стили оказываются ниже стилей фреймворка. Исправляем соответствующим образом.

так и провернуть

@media all and (min-width: 550px) and (max-width: 600px ) {
}

flex-wrap: wrap;

Посмотрите как делают сетки на флексах. Есть отдельные проекты, чисто сетка. Есть в составе фремворков (тот же бутстрап 4 альфа)

jsfiddle.net/ketoLpae/8

jsfiddle.net/ketoLpae/9

console.log(elementClick)
и вам все станет ясно (стремное название для переменной, кстати)

Если вы хотите "продублировать" в классе .cities-list2 вышеозначенную иконку, то просто расширьте этот класс (вы же препроцессор используете)

.cities-list2 {
  @extend .fa;
  @extend .fa-sort-desc;
}

Разумеется, чтобы это сработало, ваши font-awesome иконки тоже должны быть включены в этот же файл