4 апреля 2012 г.

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

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

В комментарии к вёрстке блока, в 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>

Комментариев нет:

Отправить комментарий