Алексей Николаев

Альтернатив не существует. Увы, но это хромой.

Наиболее предпочтителен вариант 3, т.к. в этом случае предполагается, что у каждого элемента будет свой класс, что соответствует практически всем основным методологиям, и нежно любимой мной SMACSS.

На производительность каскадность влияет напрямую, т.к., во-первых, увеличивается размер css-файла, блокирующего отрисовку, а во-вторых, чтение селекторов и поиск в дереве происходит справа налево, т.е. в варианте 1 сперва найдутся все ссылки и изображения, и лишь потом из собранной кучи вычленятся те, что входят в шапку. Но идеально, конечно, будет как-то так:

.logo {
    background-color: #ccc;
}
.logo-link {
    color: #000;
    text-decoration: none;
}
.logo-img {
    display: block;
    width: 100%;
}

Никакой каскадности (размер выходного css сведен к минимуму), потери производительности при выборке также минимизированы.

Если макет имеет разрешение более 1280px, то дизайнер, купивший неделю назад макбук для трушности, идиот, потому что не позаботился о совместимости его работы с нормальными мониторами. Чтобы сверстать такой макет, необходимо в фотошопе уменьшить размер изображения (с пропорциями) до стандартной ширины. Например, 960 пикселов. Можно и побольше, ориентируясь на макс. ширину Тостера или вашего собственного монитора, например.

Но как правило, корректно дропать размер сразу в 2 раза - зачастую, именно это и требуется. Если есть сомнения, можно уточнить у заказчика.

Если все же нужно, чтобы на 1900px выглядело именно так, лучший выход - дропнуть размер под комфортный для работы, а на более высокие разрешения просто увеличивать размер контента, пропорционально. Само собой, верстку нужно будет построить на основе процентов \ viewport units, и em.

Смотрите в сторону градиентов (background-image: linear-gradient()).

Используйте тайм-трекеры. Я пользовался ManicTime, неплохая софтина. Правда, потом придется заказчику скриншоты слать.

Можно повернуть контейнер с картинкой на 25%, и саму картинку на -25% при помощи transform: rotate

C остальными блоками так же

Потому что в результате translate(-50%, -50%) получилось не целое значение. Уберите transform, и замените его любым другим способом позиционирования окна.

Селектор по ID быстрее, что актуально для быстродействия (работа с DOM - самые медленные операции, как правило). Для скриптов тоже часто используются селекторы по классам, если нужно провести операции с несколькими объектами.

Опять же, в некоторых методологиях (например, в SMACSS) более чем нормально использовать селектор по id в CSS, в определенных случаях. Но я предпочитаю этого не делать без явной необходимости.

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

P.S. К тому же, если использовать jade \ slim при разработке, второй способ может стать серьезным препятствием.