Pretor DH

Класс "clearfix" нужно добавить.

<section class="mild clearfix">

Узел это не код, это обьект.
Исходный код в виде строки хранится в свойстве этого обьекта innerHTML.
Сохрани свойство, и восстанавливай в свойство.

var copydiv = document.getElementById('top-lighthouse').innerHTML;

    localStorage['localMem'] = copydiv;
    copydiv = localStorage['localMem'];

   /*  document.body.insertBefore( copydiv, document.body.firstChild ). не годится*/
    document.body.firstChild.innerHTML = copydiv;

Делай две сначала и после элемента

.item:before,
.item:after {
content: '';
width: 33px;
height: 5px;
background-color: #777777;
}

Нарисуй одну линию на всю ширину, а иконкам задай размер и фоновый цвет бекграунда.

.container { position: relative; }
.container:before, {
content: '';
position:absolute;
top: 20px;
width: 100%;
height: 5px;
background-color: #777777;
}
.item {
text-align: center;
}
.item i {
display:block;
width:30px;
height:30px;
line-height:30px;
background: #fff;
}

Делается просто:

По событию onscroll пишем в localStorage.scrollTop заначение скрола.
По событию onload читаем из localStorage.scrollTop и устанавливаем позицию scrollTop у элемента с главным скролом.

selector = 'body';   /* <--- cюда положи селетор на элемент с основным скролом */
$('document').on('load', function(){ $(selector).attr('scrollTop', localStorage.scrollTop); }
$(selector).on('scroll', function(){ localStorage.scrollTop = $(selector).attr('scrollTop'); }

P.S. Для юзабельности, обязятельно должен быть элемент перемещающий на начало страницы.

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

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.
  

P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.

codepen.io

Замени на CSS меню, онлайн конструкторов для них вагон.

Селекторов для слов в CSS нет вообще.

Можно воспользоваться скриптом:
www.dynamicsitesolutions.com/javascript/first-word...

И написать по его примеру, еще селектор для :nth-word. :)

Современная форма - это комплекс решений, в разных областях. И поставить один модуль который решит проблему - не возможно в принципе. Каждый специалист может собрать свою часть. Но без архитектора который скажет как это скрутить в кучу, будет велосипед с квадратными колесами - ехать можно но по специальной дороге.

1. Разметка:
   
   • пишу всегда вручную;
     
   • длинные селекты тянутся из базы посредством шаблонизатора (например серверного TWIG);
     
   • прописываю полностью с атрибутами валидации HTML5 (благо все современные браузеры потдерживают);
     
   • выдумывать JS-велосипеды для валидации не стоит уже давно;
     
   • для зависимых полей пока есть простой js-клаcс сверяющий их.
     
   • drag&drop файлов давно уже работает без JS;
     
   • для подгрузки изображений в страницу на стороне клиента js-класс.
     
   
   
2. Стили:
   
   • один раз прописаны стили для разных-форм на уровне тегов и взаимоотношений тегов (в итоге все формы на сайте виглядят в одном стиле);
     
   • класы только для самой формы, определяет как одна выводится: локально, модально или в теле контента;
     
   • кому сложно написать 300 строчек CSS, пользуйтесь фреймворками;
     
   • ни в коем случае не делайте стили форм для каждого раза как онные встречаются (придет дядя даст по рукам :) ).
     
   
   
3. Отправка:
   
   • пользуйтесь action, submit и target;
     
   • нужны данные как модальное окно есть iframe;
     
   • ajax с формами не использую он изначально предназначен для другого:
     
     • для подгрузки полей в селектор, но только если селектор очень большой;
       
     • для поиска налету.
       
     
     
   
   
4. Сервер:
   
   • использую специальный статический класс, который делает валидацию и XSS/injection-очистку;
     
   • как минимум PDO с подготовленными запросами;
     
   • Doctrine;
     
   
   
5. База-данных:
   
   • наименования полей в базе соответствуют наименованиям полей в формах (с префиксом);