Кирилл

https://www.npmjs.com/package/gulp-sourcemaps

Если правильно вас понял, то примерно такое вам нужно. codepen.io/Kublyakov/pen/KzmvVX
При наведении меняем цвет, и за счет transition цвет меняется не сразу, а постепенно, в моем случае в течение 0.5 секунд. Думаю, смысл понятен и сможете доработать для своих целей.

jade-lang.com
Каждый блок - отдельный файл.
Допустим, файл header.jade - один для всех страниц, поменяв в тем текст на необходимый - он поменяется во всех страницах.
P.S. - Увидел, что в существующем коде замены нужно проводить. Тогда да, поиск с заменой.

Я пользуюсь примерно таким алгоритмом в подобных вопросах:
1. Смотрю в спецификации.
2. Если в спецификации не нахожу ответа, то смотрю как этот момент реализован в популярных фреймворках - bootstrap, foundation.
Для меня авторы этих фрейморков являются авторитетами, чьему мнению я доверяю.

На кодпене по запросу "timeline" попробуйте посмотреть решения codepen.io/search/pens?q=timeline&limit=all&type=t...

А вот это не то, случаем? https://habrahabr.ru/post/202408/

Emmet разве не используете для html? Ввели тэг, нажали Tab - получили развернутый тэг с курсором между ними.
P.S. Кроме этого куча незаменимых фишек прилагается emmet.io

Ну сплющенной анимация получается, потому-что у анимируемого блока разные ширина и высота.
Как вы представляете круглую анимацию у прямоугольного блока? =)
Решение проблемы - для этого зеленого блока сделать равными ширину и высоту.
Либо сделать две разных анимации для увеличения ширины и увеличения высоты с разным временем анимации.

Не так много свойств с небольшой поддержкой, можно каждое тут caniuse.com проверять. Со временем запомните и всё.
UPD: Для саблайма есть плагин timkl.xyz/sublime-text-caniuse - инфу берет тоже с caniuse.com