Ivan Stroykin

О. Не знаю, правильное ли это решение? Ссылка

codepen.io/StivinKing/pen/bgePye

<div class="header">
  <nav class="navbar navbar_visible">
  <ul>
    <li><a href="#">Visible</a></li>
    <li><a href="#">Hidden</a></li>
  </ul>
</nav>
<button class="btn">the btn</button>
</div>

$(document).ready(function(){
	$(".btn").click(function(){
		$(".navbar").slideToggle(500);
	})
	$(".btn").click(function(){
  	$(".navbar").removeClass("navbar_visible").addClass("navbar_hidden")
  })
});

1 div, 1 class
codepen.io/StivinKing/pen/PWzmJB
p.s. лучше для кнопки использовать button

• Пользователь зашел на страницу -> сделали запись в БД. К примеру: id пользователя и время
  
• Как только пользователь нажал на кнопку делаем запрос к базе и сравниваем: время когда он нажал на кнопку и время из базы (первое минус второе). Если меньше чем нужно, выкидываем ошибку, если больше или ровно то задание выполнено
  

Откройте результат, а рядом откройте прикрепленное вами изображение. И полистайте туда и обратно много раз. Заметны различия?
Шрифты (fonts-size, line-height и т.д.), цвета (фон вообще отличается, текст во многих местах другого оттенка), позиционирование элементов так же отличается
P.S. Если еще не начали пользоваться, вот хороший плагин для Chrome для pixel perfect: PerfectPixel by WellDoneCode
P.S.S. Это с визуальной точки зрения. Сейчас немного времени будет, посмотрю код

Решил проблему в общих чертах. Правда не обошлось без маленького костыля, но видимо по другому пока никак.
Тут либо использовать для аутентификации страницу которая будет сгенерирована на django приложением, либо при отправки формы с приложения на angular2 приватно генерить форму тем же django для правильного получения токена.
Ну а благодаря пакету angular2-cookie обращение к токену заменилось с такого:

document.cookie.replace(/(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/, "$1");

на вот такое:
this.cookie.get('csrftoken');

Если у кого-то есть решение лучше, буду рад его узнать

Влияет. Каждый файл это дополнительный запрос.
Но раскидывая стили по файлам удобнее за ними следить и править.
Что же делать? Правильно. Раскидывать по файлам, и работать с ними. А при загрузке на сервер пропускать через сборщик проектов (к примеру gulp), который объединит все css файлы в один, а так же сожмет их

Если проект большой (больше чем просто 5 страничник) то во всем нужно строить правильную структура. Без неё в дальнейшем будет большой хаус, когда нужно будет что-то изменить, а зависимости валяются по всему проекту. И это касается как языков программирования, так и, конечно же, таблицы стилей.
Сразу скажу, что последний вариант, когда идет класс, и в нем же прописаны media, которые необходимы только этому классу это очень хороший вариант. Так как в случае чего не нужно бегать по всему коду (а если вы пишите на sass, то файлов будет много. по файлу на каждый компонент). А так все рядом, все видно, сразу понятно что к чему и легко вносить изменения.
На скорость никак не повлияет. Браузер в любом случае обработает все css которые вы ему скормите. А вот на последующую скорость разработки повлияет довольно таки сильно.

width: 32%; и по 1% отступа с правой стороны каждого блока + у первого 1% слева. Это если уж в легком варианте сделать. А разбираться лучше на примере уже устоявшихся сетках. Посмотрите как это сделано в том же bootstrap

Немного грубый вариант, думаю уж наведение допилите ссылка

Дополнил ваш код ссылка
Чтобы понять, что да как, просто сравните.
p.s. Рекомендую описывать элементы сверху вниз. К примеру, в вашем случае сначала родитель: "card", ниже дочерние: заголовок, цена, список, кнопка
И зачем "item-price" делать списком?

1. Скрыть
   
2. Кинуть списком в footer
   
3. Сделать одно меню выпадающим, другое выдвигающимся. p.s. глупо, но вариант
   

мм, спросите у заказчика (или того кто рисовал, или у любого кто связан с проектом), как они себе представляют. Где, по их мнению, должна быть эта менюшка. Это совершенно нормальный вопрос.

Подключайте между тегами другой css файл, который, если хотите, пишите на less и компилируйте

Не обижайте codepen)
Ссылка

webfont
Для подключения нужна регистрация. Можно без проблем скачивать с готовым css, можно изменять вид шрифтов под свои нужны

Дописываем:

#left_side {
    position: relative;
}
ul#catalog_menu ul {
   right: -304px;
}

Теперь как бы не сжали основной блок, всплывающий всегда будет по контуру.
codepen.io/StivinKing/pen/VKYjRV

Но код, если честно, надо бы полностью переписать. Там столько лишнего и не нужного

Один общий файл css для общих стилей и дополнительно под каждый отдельный лендинг свой css. Таким образом будет легко всё поддерживать и по возможности легко убирать/добавлять.
Ну а на "продакшен" было неплохо еще все css "минифицировать"

PerfectPixel by WellDoneCode
Сам пользуюсь

codepen.io/StivinKing/pen/rLdpzr
Это на быструю руку, можно привести к более короткому коду
Иконки вырезаем с белым фоном, и с помощью абсолютного позиционирования (отталкиваясь от предка "text") расставить на свои места.
В итоге у нас из картинок только иконки