Воскресшая вёрстка

Случалось ли вам поддерживать вёрстку, которая уже прошла этап оживления? Если да, то наверняка возникало желание посмотреть, какой она была первоначально, до оживления. Мы практикуем такой метод:

В комментарии к вёрстке блока, в css-файле, прописывается не только название блока, но и его разметка в формате ZenCoding. Если вам потребовалась разметка, просто скопируйте строчку и преобразуйте её в HTML (например, в PyCharm'е ZenCoding поддерживается из коробки).

/**
 * @section     Элемент списка
 * article.item.js-item>((header.item__header>((div.item__image>img)+(span.item__favorite>span.favorite)+(h1.item__title>a)+div.item__subtitle))+(div.item__expand>span.item__expand-icon.js-item__expand)+section.item__content.js-item__content)
 */

.item {...}
.item__header {...}
.item__image {...}
.item__favorite {...}
.item__title {...}
.item__subtitle {...}
.item__expand {...}
.item__expand-icon {...}
.item__content {...}

Вот так в данном примере будет выглядеть разметка:

<article class="item js-item">
    <header class="item__header">
        <div class="item__image"><img src="" alt=""></div>
        <span class="item__favorite"><span class="favorite"></span></span>
        <h1 class="item__title"><a href=""></a></h1>
        <div class="item__subtitle"></div>
    </header>
    <div class="item__expand">
        <span class="item__expand-icon js-item__expand"></span>
    </div>
    <section class="item__content js-item__content"></section>
</article>