Иван Беленков

вот тут важная пометка имеется:

iOS has an issue preventing background-position: fixed from being used with background-size: cover

там же ссылка на воркэраунд.

Смело играйтесь с размером шрифта и интерлиньяжем. Никогда не трогайте кёрнинг, он в браузерах всё равно отстойный. Если вам нужно какое-то особое начертание(болд, к примеру), то используйте соответствующий шрифтовой набор, а не кнопки на панельке шрифтов. Не масштабируйте шрифты, css это не умеет(в теории css может сделать condensed, но работает это из рук вон). Базовую линию тоже желательно никуда не двигать(если вы, конечно, не делаете всякие сноски и индексы). Да, и не забывайте проверять, чтоб после всяких операций(например, масштабирования) размер кегля сохранял целочисленное значение.
Ещё, моё личное предпочтение, не используйте перенос строки на этапе набора текста, лучше задайте ширину блока, пусть PS переносит слова автоматически. В таком случае, текст скопируется одной строкой. Ну да, и сглаживание в Sharp для мелкого текста.

Когда анонсируется новое свойство, ещё толком неизвестно, какой в результате будет синтаксис. Довольно часто итоговый синтаксис меняется полностью(как было, например, с флексбоксом). Если вы обратите внимание на тот же градиент, то увидите, что во всех свойствах с префиксом он описывается по-разному. Если б это свойство ввели сразу без префикса, то в устаревших(но используемых) браузерах оно бы сейчас не работало совсем, а в сайтах, созданных год назад, оно соответственно не работало бы в современных.

У вас бэкграунд шапки повешен на внешний элемент. У шапки фиксированная ширина, а у бэкграунда нет. Вообще, свёрстано всё ужасно, все элементы разной ширины, при сжатии окна по ширине элементы начинают расползаться. Например, у вас на скриншоте очень выпирает область контента. Я могу порекомендовать вот что:

html, body {
    min-width: 1010px;
}

Да, конечно. Есть хорошие решения, которые генерируют спрайты. Также в виде grunt- и gulp-плагинов.
Мне нравится вот это: https://github.com/Ensighten/spritesmith

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

jsfiddle.net/s1bf5bdL

a) Transition прекрасно работает. Просто необходимо указывать анимируемое свойство во всех состояниях:

.wrap .someclass {
    transition: all .5s ease;
    top: 150px;
}
.wrap:hover .someclass {
    top: 0;
}

b) Чтобы получился круг, вам нужно указать border-radius: 50% для квадрата:

.circle {
    width: 25px;
    height: 25px;
    line-height: 25px; // центрируем текст по вертикали;
    text-align: center; // и по горизонтали;
    border-radius: 50%;
}

Вопрос в духе, что лучше использовать: хлеб или батон.
И тем не менее - @font-face лучше писать самому. Ибо Гугл не включает некоторые решения(напр., оптимизацию для IE ниже девятой версии).

Как таковых, стандартов нет. Как правило в каждой организации, в которой вы будете работать, есть стайл гайды по всем известным технологиям. Если вы работаете сольно, то попробуйте один из паттернов именования классов. Например, загуглите OOCSS, MCSS или БЭМ.
Придерживаться определённого порядка свойств при написании CSS - сложно. Тут гораздо проще воспользоваться постобработкой CSS файла. К примеру, упомянутым здесь пользователем @MonkAlbino, CSScomb или другим, более продвинутым решением.
Также можно воспользоваться чужими стайл гайдами, если они лежат в свободном доступе. Например, Google HTML/CSS Style Guide.

Перевёрстывать ничего не надо, нужен только отдельный файл css, в котором будет прописано, какие блоки вы не хотите отображать в распечатке(например, проставить таким блокам класс noprint, и прописать в print.css noprint{display:none;}). файл поместить на страницу в <link media='print' ... />.