HTML CSS вёрстка

Зачем вообще «без фреймворка»

CSS-фреймворки ускоряют прототип, но на готовом дизайне с уникальной сеткой верстальщик тратит время на переопределение чужих классов и вычищение лишнего CSS из бандла. Кастомная вёрстка на Grid, Flexbox, custom properties и логических свойствах даёт полный контроль над размером стилей и предсказуемость. Для SEO-критичных страниц меньше CSS и JS — проще уложиться в бюджет производительности без танцев с purge.

Современный CSS вместо старых приёмов

• grid-template-columns: repeat(auto-fit, minmax(...)) вместо float-сеток
• gap вместо margin-хаков между колонками
• clamp() для fluid-заголовков и отступов
• container queries там, где компонент должен реагировать на ширину родителя
• focus-visible для аккуратных стилей фокуса без ломания мыши

Препроцессоры (Sass, Less) всё ещё удобны для переменных и вложенности, но нативные CSS-переменные и nesting в современных браузерах сокращают необходимость в слое абстракции. PostCSS с autoprefixer остаётся полезным для согласованных вендорных префиксов без ручной рутины.

Сборка: когда она нужна

1. Несколько страниц и общие компоненты — Vite, Parcel или лёгкий Webpack
2. Минификация CSS/JS, оптимизация картинок, спрайты SVG
3. Линтеры: stylelint для CSS, html-validate для разметки
4. Один лендинг на 5 блоков — допустима ручная сборка без npm, если согласовано

JavaScript: минимально необходимый

HTML/CSS вёрстка не запрещает JS — она ограничивает его роль. Меню, аккордеон FAQ, простой слайдер без тонны зависимостей, маска телефона — нормальные задачи для десятков строк vanilla JS или лёгкой библиотеки. Не стоит тянуть jQuery «по привычке» в 2026 году: нативные querySelector, classList и fetch покрывают большинство лендингов. Если нужен сложный калькулятор или личный кабинет — это уже зона frontend-разработки.

Доступность и базовая валидация

• Проверка W3C validator для критичных шаблонов
• Контраст текста и фона по WCAG AA для основного контента
• Скрытый текст только через visually-hidden, не display:none для скринридеров
• Правильный autocomplete в формах для мобильных клавиатур

Передача в натяжку или в SPA

Чистая вёрстка — идеальный вход для WordPress, Битрикс и MODX: разработчик режет шаблоны по уже согласованным классам. Если же проект планируется на Next.js или Nuxt, заранее решите, какие блоки станут компонентами, а какие останутся статичным HTML в markdown. Переделка BEM-вёрстки в JSX без плана дороже, чем сразу договориться о структуре компонентов.

Документируйте токены: цвета, радиусы, тени, шаг сетки. Это ускоряет и доработки дизайна, и будущий редизайн — не нужно выковыривать значения из computed styles в браузере.

Организация файлов и именование

Структура проекта снижает стоимость правок: отдельные файлы для базы, сетки, компонентов и страниц; понятные имена классов по BEM или по компонентам. Избегайте глубокой вложенности селекторов — она усложняет переопределение при натяжке. Если в проекте два языка, заложите место для более длинных строк в кнопках и меню заранее через min-width или перенос.

1. Один источник правды для цветов и отступов — variables.css
2. Критические стили первого экрана выделить для возможной инлайн-вставки
3. Не смешивать reset от разных библиотек
4. Версионировать шрифты локально или через CDN с fallback

Печать и нестандартные медиа

Для страниц прайса и статей иногда нужен адекватный вид при печати: скрыть навигацию и баннеры через @media print, расширить ссылки полным URL при необходимости. Тёмная тема через prefers-color-scheme — опциональна, но если дизайнер её рисует, проверьте контраст и логотипы в обоих режимах, а не только инвертируйте фон автоматически.