Метод Copy-then-Adapt

Метод Copy-then-Adapt

При адаптації існуючого HTML лендингу — копіювати CSS точно з оригінальних файлів. Переписування "з пам'яті" завжди дає помилки у значеннях, пропущені властивості та неправильні кольори.

Алгоритм

1. Прочитати всі CSS файли оригіналу — знайти всі <link rel="stylesheet"> в HTML
2. Розбити HTML на логічні блоки (hero, countdown, form, footer тощо)
3. Для кожного блоку — скопіювати відповідні CSS правила
4. Додати префікс .cms-section-{type} до кожного селектора
5. Замінити хардкодні URL зображень на var(--VAR_NAME)
6. Замінити хардкодні тексти/числа на {{VAR_NAME}}

Приклад: адаптація CSS

/* ОРИГІНАЛ: WIbFqtcMtp0y.css */
.offer { background: #fff; padding: 0; }
.offer .box { background: url("hero.jpg") 50% 0 no-repeat; height: 480px; }
.offer .sale { position: absolute; left: 30px; top: 287px; width: 95px; height: 95px; }
.offer .price { padding: 10px 15px 5px; background: #fff; }
.offer .price .old-price { font-size: 14px; color: #888; text-decoration: line-through; }
.offer .price .new-price { font-size: 28px; color: #d32f2f; font-weight: 700; }

/* АДАПТАЦІЯ: style.css — лише додаємо .cms-section-hero зверху */
.cms-section-hero .offer { background: #fff; padding: 0; }
.cms-section-hero .offer .box {
  background-image: var(--PRODUCT_BG);   ← url() замінено на var()
  background-position: 50% 0;
  background-repeat: no-repeat;
  height: 480px;
}
.cms-section-hero .offer .sale { position: absolute; left: 30px; top: 287px; width: 95px; height: 95px; }
.cms-section-hero .offer .price { padding: 10px 15px 5px; background: #fff; }
.cms-section-hero .offer .price .old-price { font-size: 14px; color: #888; text-decoration: line-through; }
.cms-section-hero .offer .price .new-price { font-size: 28px; color: var(--ACCENT_COLOR, #d32f2f); font-weight: 700; }

Приклад: адаптація HTML

<!-- ОРИГІНАЛ -->
<div class="offer">
    <div class="box"></div>
    <div class="price">
        <div class="old-price">Стара ціна: <b>1780 грн.</b></div>
        <div class="new-price">Ціна сьогодні: <b>890 грн.</b></div>
    </div>
    <a href="#order" class="big-btn">ЗАМОВИТИ</a>
</div>

<!-- АДАПТАЦІЯ: template.html -->
<div class="offer sy2-offer-01">
    <div class="box"></div>
    <div class="price">
        <div class="old-price">{{OLD_PRICE_LABEL}} <b>{{OLD_PRICE}} {{CURRENCY}}</b></div>
        <div class="new-price">{{NEW_PRICE_LABEL}} <b>{{NEW_PRICE}} {{CURRENCY}}</b></div>
    </div>
    <a href="{{CTA_HREF}}" class="big-btn">{{CTA_TEXT}}</a>
</div>

Правила копіювання

Тексти — копіювати дослівно

Тексти з оригіналу (описи, характеристики, підписи) — копіювати точно, включно з пробілами (3Вт, а не 3 Вт), розмірами (17х4.5 з літерою х), скороченнями (Макс., а не Максимальна). Контент може бути юридично значущим.