Денис Инешин

Есть несколько причин.

1. Уровень абстракции. Поисковики умеют индексировать картинки, по этому, те изображения, которые относятся к оформлению, а не к контенту должны быть вынесены оттуда и размещены в css, там же где и все остальные стили.
2. Возможность динамично менять внешний вид сайта, например реализовывать адаптивность. Это делается легко на CSS с помощью media queries, а вот на стороне HTML уже гораздо сложнее и может потребоваться использовать JavaScript.
3. Меньший вес. CSS сегодня умеет рисовать очень многое, на некоторых проектах экономия на кол-ве картинок и их весе может достигать 90%. Например одни лишь скругленные уголки отрисованные на CSS могут сократить итоговый вес картинки очень существенно. И это делает интерфейс гораздо более отзывчивым особенно на крупных проектах, где важна каждая милисекунда.

Примерно вот так это делается: jsfiddle.net/IonDen/b0vcqz80

1. Любой код требует поддержки, раз вы пишите комментарии, значит код будет поддерживаться еще долго и над ним будет работать команда. В международной практике является нормальным явлением, когда команды мультинациональны. В такой ситуации общепринято использовать всем понятный английский язык, который является стандартом в IT. Даже в ситуации когда команда вся русскоязычная, всегда есть вероятность обмена опытом, когда к вам на стажировку приедет иностранный специалист или просто потребуется например продать код другой компании. Так что даже палка раз в год стреляет.
2. Это хорошая практика. Конечно можно обойтись без английского языка, работая программистом в России. Но на самом деле английский очень нужен, чтобы выйти за рамки и стать по настоящему крутым спецом. Как бы много не было материалов, книг, курсов, туториалов на русском, на английском всего этого добра в сотни раз больше и очень высокого качества.

height:
jsfiddle.net/bxpmk17p

position: fixed вам в помощь. Блок с этим position будет зафиксирован относительно окна браузера.
Вот простейший пример:
jsfiddle.net/IonDen/avk4usev

Примерно так можно: jsfiddle.net/IonDen/d0LrsdL6

<div class="line">
    <div class="cont">Йо, какой-то блок</div>
    <div class="cont-line"><div></div></div>
    <div class="cont">Йо, какой-то блок</div>
</div>

.line {
    display: table;
    width: 100%;
}
.cont {
    vertical-align: middle;
    display: table-cell;
    white-space: nowrap;
    width: 1%;
}
.cont-line {
    vertical-align: middle;
    display: table-cell;
    padding: 0 10px;
}
.cont-line div {
    height: 2px;
    background: #000;
}

var height = $(window).innerHeight(); // получаем высоту экрана

$(window).scroll(function(){
      if ($(this).scrollTop() > height) {
          $('.header').addClass('fixed');
      } else {
          $('.header').removeClass('fixed');
      }
});

Как то так

Есть еще прекрасный плагинчик, который позволяет выполнять код при достижении определенных точек на странице, попробуйте и его:
imakewebthings.com/waypoints

Chrome -> F12 -> Toggle Device Mode (Такая иконка меню консоли) -> выбираем устройство из списка, тестируем. При необходимости повторить в FF, там тоже есть подобный инструмент: меню -> разработка -> адаптивный дизайн.

Подправьте настройки анимации: jsfiddle.net/ra4hL5uh/1 А лучше сделайте через генератор:
matthewlein.com/ceaser

+ если плавности будет не хватать можно использовать для анимации не top, а делать через translate или translate3d