Как сделать шаблон сайта: HTML, CSS и повторные компоненты

Сделать шаблон сайта значит отделить постоянную систему от сменного содержания. В постоянную часть входят сетка, типографика, цвета, кнопки и повторные блоки; в сменную часть входят название проекта, тексты, ссылки и изображения. В результате новый сайт собирается заменой данных и нужных секций, а не копированием случайных фрагментов.

Какой результат считать готовым шаблоном

Исходная ситуация: у вас есть одна рабочая страница, но в ней стили, текст и разметка смешаны. Ожидаемый результат: из чистой копии можно за один проход заменить название, палитру, навигацию и секции, не редактируя десятки одинаковых значений. Проверка простая: соберите из шаблона две визуально разные страницы и убедитесь, что исправление общего компонента применяется к обеим.

• Есть понятная структура файлов и инструкция запуска.
• Цвета, размеры отступов и ширина контейнера заданы в одном месте.
• Повторные элементы имеют одинаковые классы и состояния.
• Текст и ссылки легко найти без чтения всех стилей.
• На узком экране нет горизонтальной прокрутки и скрытых действий.
• Перед копированием удалены аналитика, чужие контакты, ключи и реальные данные форм.

Правило выноса: если значение или блок повторился трижды и должен меняться одинаково, сделайте его частью системы. Если встречается один раз и отражает смысл конкретной страницы, оставьте его содержанием.

Какие файлы и роли нужны

Для простого шаблона достаточно index.html, styles.css, папки assets и короткого README.md. JavaScript добавляйте только для поведения, которое нельзя выразить HTML и CSS. Базовую структуру страницы и публикацию можно сверить с гайдом по сайту на HTML.

1. Скопируйте рабочую страницу в отдельный каталог шаблона.
2. Удалите тексты и изображения, относящиеся только к исходному проекту.
3. Оставьте смысловые места: шапка, главный экран, преимущества, доказательства, форма действия и подвал.
4. Перенесите повторяемые цвета, размеры и радиусы в CSS-переменные.
5. Приведите одинаковые кнопки, карточки и секции к одним классам.
6. Добавьте пример содержимого, который показывает назначение блока, но не выглядит как данные реального клиента.
7. Запишите в README.md, что заменить, что можно удалить и как проверить страницу.

Как вынести дизайн в CSS-переменные

Пользовательские свойства CSS объявляются с префиксом -- и подставляются через функцию var(). Их можно определить на :root, чтобы использовать по всей странице. Такой механизм описан в официальном руководстве MDN по CSS custom properties. Это подходящее место для цветов, ширины контейнера, радиусов и базовых отступов.

:root {
  --color-bg: #f6f1ec;
  --color-text: #202020;
  --color-accent: #d85a30;
  --space-section: clamp(3rem, 8vw, 7rem);
  --radius-card: 1.25rem;
  --container: 72rem;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }
.button { background: var(--color-accent); }

Не превращайте каждое число в переменную. Имена должны объяснять роль, например --color-accent, а не повторять значение вроде --orange. Тогда смена палитры не требует переименования. Добавляйте запасное значение в критичных местах, например var(--color-accent, #d85a30), и проверяйте контраст после каждой смены цветов.

По теме: Как сделать сайт-анкету: форма и заявки в 2026 году

Как устроить повторные компоненты без фреймворка

Компонент в простом шаблоне можно представить как договор: неизменная разметка, набор допустимых вариантов класса и место для содержания. Например, у карточки остаются контейнер, заголовок и описание, а модификатор меняет акцент. Кнопка имеет одинаковые состояния фокуса, наведения и отключения на всех страницах.

Если блоки создаются JavaScript, элемент <template> хранит фрагмент HTML, который затем можно клонировать через его свойство content. Назначение элемента подтверждает [справка MDN по template](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template). Для статической страницы это необязательно: обычная смысловая разметка проще, пока карточек мало и данные не приходят из массива или API.

<template id="card-template">
  <article class="card">
    <h3 class="card__title"></h3>
    <p class="card__text"></p>
    <a class="button card__link" href="#">Подробнее</a>
  </article>
</template>

Разделяйте компоненты и секции. Кнопка или карточка может использоваться где угодно. Главный экран задаёт порядок нескольких компонентов и обычно зависит от цели страницы. Если сделать весь сайт одним гигантским компонентом, повторное использование снова потребует копирования и ручной чистки.

Как менять содержание безопасно

Перед заменой подготовьте таблицу мест: SITE_NAME, PAGE_TITLE, MAIN_HEADING, PRIMARY_LINK, CONTACTS, IMAGE_ALT. Это не специальные команды, а заметные метки в черновой копии. После заполнения поиск по проекту не должен находить ни одной метки. Такой чек работает надёжнее, чем попытка вспомнить все подписи глазами.

• Замените <title>, описание страницы и главный заголовок отдельно, у них разные задачи.
• Проверьте каждую ссылку и адрес действия, особенно кнопку в шапке и финальный призыв.
• Для каждой содержательной картинки задайте подходящий alt. У чисто декоративных изображений оставляйте пустое значение alt="", чтобы программы чтения с экрана могли их пропустить.
• Удалите пустые секции целиком, не оставляйте заголовки без содержания.
• Не копируйте счётчики, формы и внешние скрипты клиента в новый проект.
• Проверьте форму тестовой отправкой и убедитесь, что данные пришли правильному получателю.

Для конкретной структуры шапки используйте разбор адаптивной шапки сайта, а для примера страницы, которую удобно собирать из повторных секций, посмотрите структуру сайта-портфолио.

По теме: Как сделать ответы на сайте: FAQ без лишнего JavaScript

Как проверить адаптивность, а не только ширину

Адаптивный дизайн должен сохранять удобство на разных размерах и устройствах. MDN рекомендует гибкие сетки, относительные размеры, корректный viewport и медиавыражения в тех местах, где содержание начинает выглядеть плохо. Принцип и инструменты описаны в руководстве по responsive web design.

1. Начните с узкого окна и проверьте порядок содержания в одну колонку.
2. Медленно расширяйте окно и добавляйте точку перестройки там, где блоки действительно ломаются.
3. Проверьте очень длинный заголовок, короткий текст и карточки разной высоты.
4. Пройдите страницу с клавиатуры: фокус виден, порядок логичен, меню и кнопки доступны.
5. Отключите изображение или укажите несуществующий путь и убедитесь, что смысл страницы сохраняется.
6. Откройте страницу на реальном телефоне, проверьте кнопки, форму, ориентацию и скорость первого экрана.

Проверка валидатором не заменяет визуальный и функциональный тест, но находит ошибки вложенности и атрибутов. W3C Markup Validation Service описывает валидацию как проверку документа по формальным ограничениям разметки и отдельно предупреждает, что это не полная проверка качества.

Частые сбои шаблона

• После смены цвета часть кнопок осталась старой: значение продублировано вне переменной.
• Новая секция шире остальных: она не использует общий контейнер.
• На телефоне появляется прокрутка: у изображения, таблицы или блока задана фиксированная ширина.
• Карточки расходятся по стилю: для одного состояния создан новый класс вместо варианта компонента.
• В новом сайте остались чужие данные: перед копированием не было списка меток и финального поиска.
• Исправление нужно повторять в нескольких файлах: граница компонента выбрана слишком крупно или слишком мелко.

По теме: Как сделать описание сайта: лид и meta description

Когда шаблон не подходит

Шаблон не должен притворяться системой управления содержанием. Если страницы создают несколько редакторов, данные часто меняются, нужны роли, поиск, каталог или сложные формы, удобнее выбрать CMS или приложение с компонентной сборкой. Не используйте один шаблон и для лендинга, и для личного кабинета: у них разные данные, состояния и требования к безопасности.

Частые вопросы

Нужен ли JavaScript для шаблона сайта?

Нет, если страница статическая. HTML задаёт структуру, CSS отвечает за вид. JavaScript нужен для интерактивного поведения или генерации повторных блоков из данных.

Можно ли сделать один шаблон для всех клиентов?

Можно сделать общую основу, но не универсальную страницу. Сохраняйте систему стилей и компоненты, а структуру секций подбирайте под задачу конкретного сайта.

Где хранить тексты и ссылки?

Для небольшой страницы их можно оставить в HTML с заметными метками. Когда страниц и редакторов становится много, вынесите данные в CMS или структурированный файл и добавьте проверку обязательных полей.

Как понять, что шаблон действительно повторный?

Соберите две разные страницы из чистых копий. Если общее исправление делается один раз, а сменное содержание не требует править CSS, границы выбраны удачно.