Случалось ли вам поддерживать вёрстку, которая уже прошла этап оживления? Если да, то наверняка возникало желание посмотреть, какой она была первоначально, до оживления. Мы практикуем такой метод:
В комментарии к вёрстке блока, в css-файле, прописывается не только название блока, но и его разметка в формате ZenCoding. Если вам потребовалась разметка, просто скопируйте строчку и преобразуйте её в HTML (например, в PyCharm'е ZenCoding поддерживается из коробки).
Вот так в данном примере будет выглядеть разметка:
В комментарии к вёрстке блока, в 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>
Комментариев нет:
Отправить комментарий