TheBububo

Была похожая проблема с вебштормом, попробуйте изменить файл в notepad++ и сохранить, чтобы понять не в редакторе ли дело.

Дизайнер говорит — весь мир, включая Индию, давно верстают с вектора, ибо Ретины захватывают мир.

Это вообще не аргумент, вектор спокойно вставляется в фотошоп из того же Ai.

А по-существу, верстальщику тоже не составит труда сверстать из Ai, главное чтоб не с jpg =)

<div class="module module_center module_grey js-scroll js-scroll-inited"> ... </div>

module {
width: 100%;
box-sizing: border-box;
padding: 10px;
}
module_grey {
background: #ccc;
}
module_center {
text-align: center;
}

Например, дизайн предполагает несколько похожих модулей в разных местах, но они могут незначительно отличаться. Тогда всё общее для всех модулей пишется в один класс, а отличительные особенности по другим.
И отдельно еще навешивается класс, для работы с JS, чтобы логика не была связана с внешним видом. Также могут уже скриптами навязываться классы состояния - типа hidden, inited, active и т.п.

тот же float справился бы с ситуацией расположения блоков в примере,

Вам бы пришлось добавлять margin. Что мешает убрать space-between, добавить margin и работать как с float?

flexbox не кроссбраузерный, хромает IE сильно и хромает тот же андроид

Можете использовать float вместе с флксбоксами. Если флексбоксы не поддерживаются, подхватится float. Если флексбоксы поддерживаются, то float игнорируется.

А вообще, флексбокс очень полезен когда надо делать колонки одинаковой высоты, зависящей от контента а внутри этих колонок выравнивать блоки по вертикали. Вот пример https://jsfiddle.net/z7g1byf1/

0) смотрим как люди делают
https://vimeo.com/33180097
habrahabr.ru/post/119127

1) добавляем мета-тег вьюпорт, чтобы браузер знал, что страница адаптивная

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2) пишем медиа в css

@media  (max-width: 1000px) {
  .wrap { 
    width:100%;
  }
}
@media  (max-width: 640px) {
  body { 
    font-size:16px;
  }
}
и т.п.

обертки из 2 колонок не мешают адаптивности. Можно использовать float, тогда при маленькой ширине колонки будут одна под другой, а при достаточной ширине будут рядом.