Получил от одной конторки задачку сверстать один простенький макетик. Делать нечего. Взялся. Чтобы хоть как-то повыпендриваться, взял за основу Pug — бывший Jade. Прежде этот HTML-препроцессор мне казался неудобным, но многое изменилось после того как открыл для себя Stylus, возможно, лучший CSS-препроцессор.
У Pug’a нет полноценной обратной совместимости с синтаксисом HTML, зато он очень экономит код и, как ни странно, позволяет лучше контролировать верстку: чувствовать текстовые ноды, строчные и блочные элементы. Как по мне, именно в нечто подобное и должен превратиться формат описания элементов и их стилей. Времена уже поменялись, то что было создано в 90-е и стандартизировалось в следующие десятки лет, привнесли в фронтэнд определенную XML-избыточность и сложный парсинг CSS-правил. Тормознутость веба — тому доказательство. Поэтому сегодня фронтэнд тонет в изобилие разнородных инструментов и нуждается в полноценном рефакторинге, что в мире веба равносильно батхерту пользователей. Потому множатся стандарты в лице WebAssembly и WebComponents, которые накрывают подорожником костыли.
Короче говоря, вот еще не законченный пример.
P.S. Довольно полезно выполнять такие простые с виду задачи, потому что по ходу выполнения открываешь для себя новые возможности интерфейсов, например я стал лучше разбираться в getSelection().
