Как грамотно сверстать много похожих страниц?
Рекомендую заранее определить какие блоки будут повторятся, а какие уникальные. Определить общую структуру.
Я делаю заготовки с атомарными классами, чтобы часть очень частых стилей вынести из css в классы html, например, класс типа .ta-c {text-align: center;}, .cur-p{cursor: pointer;} и уже в хтмл вставляю классы, еще создаю атомарные d-n (display: none), d-b... Такие вещи порой часто встречаются, и как по мне, проще просто класс добавить, чем писать в css, хоть и препроцессоры упрощают все это дело, но мне удобнее так. Если надо будет вдруг везде убрать это свойство, то можно просто переопределить класс.
Посмотрите, какие цвета, размеры шрифтов, паддинги, маржены используются, и везде в препроцессоре пишите не значения, а переменные, которые объявляйте в отдельном файле, не забудьте импортировать его только.
Обязательно используйте БЭМ. На мелких сайтах он не дает ощутимую выгоду, зато на таких больших без него просто себе дороже.
Для хтмл попробуйте препроцессоры/шаблонизаторы, иначе поправить один пункт в шапке отнимет у Вас часа четыре времени (все 50 страниц перекопировать...). Еще здесь на днях один человек поделился вот такой штукой: ссылка. Позволяет инклюдить шаблоны хтмл.
А в остальном, самому интересно, кто что посоветует. Подпишусь и почитаю.
Просто оставлю.
learn.javascript.ru/screencast/gulp
learn.javascript.ru/screencast/webpack
Webpack лучше пойдет для полноценного приложения.
А вам, вероятно, лучше gulp, или grunt (но я его не люблю)