Качественная вёрстка на HTML и CSS

Основы HTML: структура, семантика и формы

Зачем нужен HTML в качественной вёрстке

HTML — это язык разметки, который описывает смысл и структуру страницы. CSS отвечает за внешний вид, а HTML — за то, что именно находится на странице и как это логически организовано.

Качественная HTML-разметка:

улучшает доступность для пользователей с ассистивными технологиями

помогает поисковым системам понимать содержание

делает поддержку проекта проще

снижает количество «магии» в CSS и JavaScript

Как мыслить структурой документа

Страницу удобно представлять как дерево: документ состоит из разделов, разделы — из блоков, блоки — из элементов контента.

!Схема показывает, что документ — это иерархия смысловых областей

Чтобы структура была понятной:

у страницы должен быть один главный заголовок (основная тема страницы)

разделы должны иметь заголовки подходящего уровня

однотипные пункты лучше оформлять списком

повторяющиеся области интерфейса (шапка, навигация, подвал) нужно обозначать семантически

Семантика: что это и почему важна

Семантика — это выбор таких элементов разметки, которые передают смысл, а не только внешний вид.

Пример семантического подхода:

навигация сайта — это область навигации, а не просто «контейнер со ссылками»

основной контент — это основной контент, а не «самый большой блок»

заголовок — это заголовок, а не «текст покрупнее»

Базовые семантические области

Ниже — типичные смысловые области страницы и элементы, которые обычно для них используют.

| Задача | Что это означает | Типичный элемент | |---|---|---| | Шапка страницы или раздела | Вводная часть: логотип, название, быстрые действия | header | | Навигация | Основные ссылки для перемещения по сайту/разделу | nav | | Основной контент | Уникальное содержимое страницы (не меню и не подвал) | main | | Самостоятельный материал | Независимая единица: пост, карточка новости, запись | article | | Смысловой раздел | Группа контента по теме внутри страницы | section | | Дополнительная колонка | Сопутствующая информация: виджеты, ссылки, реклама | aside | | Подвал страницы или раздела | Контакты, копирайт, ссылки на документы | footer |

Важно: семантика не «для красоты». Она помогает браузерам, поисковым системам и ассистивным технологиям правильно интерпретировать страницу.

Когда не стоит использовать семантический элемент

Иногда разработчики пытаются «втиснуть» семантику в любой блок. Это ухудшает разметку.

не используйте section, если внутри нет заголовка раздела

не делайте nav, если это набор второстепенных ссылок, не являющихся навигацией

не делайте article, если блок не является самостоятельной единицей

Если подходящего семантического элемента нет, используйте универсальный контейнер div и добавляйте смысл через структуру, заголовки и (при необходимости) ARIA-атрибуты.

Заголовки и логика уровней

Заголовки — основа читаемой структуры.

Правила хорошего тона:

один главный заголовок h1 на страницу (в большинстве типовых страниц)

уровни не «скачут» без причины: после h2 логично идти к h3, а не сразу к h4

заголовок должен описывать содержание блока, а не быть декоративной подписью

Смысл заголовков — не в размере шрифта. Размер задаёт CSS, а уровень заголовка задаёт иерархию.

Текстовый контент и группировка

Для качественной разметки важно различать типы контента.

абзацы текста оформляются как абзацы, а не через переносы строк

элементы перечисления оформляются списками (ul, ol)

цитаты и выдержки имеют отдельный смысл и должны быть выделены соответствующим элементом (blockquote)

Ссылки должны быть понятными:

текст ссылки должен объяснять, куда она ведёт

«кликните сюда» хуже, чем «условия доставки»

Источник по семантике и структуре HTML:

MDN: HTML — язык разметки

MDN: Семантика

Формы: основа взаимодействия с пользователем

Форма — это набор полей, который отправляет данные. Качественные формы — это про удобство, доступность и корректную отправку данных.

Из чего состоит форма

Типичный набор:

контейнер формы (элемент form)

подпись поля (элемент label)

поле ввода (input, textarea, select)

кнопка отправки (button)

Ключевая идея: у каждого поля должно быть имя name, потому что именно по name сервер (или обработчик на клиенте) понимает, какое значение к чему относится.

Связка label и поле

Правильная подпись поля повышает удобство:

по нажатию на подпись фокус переходит в поле

ассистивные технологии корректно озвучивают назначение поля

Технически это делается связкой label через for и идентификатор поля id. Важно, чтобы они совпадали по значению.

Типы полей и зачем они нужны

Выбор корректного типа улучшает ввод и валидацию.

| Задача | Тип поля | Польза | |---|---|---| | Email | email | встроенная проверка формата и подходящая клавиатура на мобильных | | Пароль | password | скрытие ввода | | Телефон | tel | удобная клавиатура на мобильных (формат не гарантируется) | | Число | number | числовой ввод и ограничения | | Дата | date | встроенный выбор даты (зависит от браузера) | | Флажок | checkbox | независимый выбор да/нет | | Радио-кнопки | radio | выбор одного варианта из группы |

Группировка связанных полей

Если несколько полей относятся к одной группе (например, способ доставки), их важно объединять.

используйте fieldset для группы

используйте legend как заголовок группы

Так форма становится понятнее и визуально, и для доступности.

Атрибуты, которые делают формы лучше

required — поле обязательно для заполнения

autocomplete — помогает браузеру подставлять сохранённые данные

placeholder — подсказка формата, но не замена label

min, max, step — ограничения для чисел

minlength, maxlength — ограничения длины

pattern — проверка по шаблону (используйте аккуратно, чтобы не ухудшить UX)

Важно: встроенная валидация браузера — это помощь пользователю, но не защита. На сервере данные нужно проверять всегда.

Источник по формам:

MDN: Формы в HTML

MDN: input

Отправка формы: method и action

У формы есть два ключевых параметра:

action — куда отправлять данные (URL обработчика)

method — как отправлять данные

Обычно используются:

get — параметры попадают в адресную строку; подходит для поиска и фильтров

post — данные отправляются в теле запроса; подходит для регистрации, логина, платежей

Если данные чувствительные (пароль, персональная информация), используйте post и защищённое соединение HTTPS.

Пример структуры формы в псевдокоде

Ниже пример структуры без привязки к внешнему виду. Это не готовая разметка, а «чертёж» смысловых частей.

Частые ошибки новичков

использование несемантических контейнеров там, где есть смысловые элементы

заголовки выбираются по размеру, а не по уровню

у полей формы нет label

у полей формы нет name, из-за чего данные невозможно корректно обработать

placeholder используется вместо подписи, из-за чего пользователь теряет контекст при вводе

Что дальше по курсу

В следующей теме логично перейти к CSS: как подключать стили, как работает каскад, специфичность и базовая типографика. Хорошая HTML-структура из этой статьи станет фундаментом для предсказуемых CSS-правил.

CSS: селекторы, каскад, наследование и единицы измерения

Зачем это нужно после HTML-структуры и семантики

В предыдущей теме вы построили смысловую HTML-структуру: заголовки, разделы, навигацию, формы. CSS теперь отвечает за то, как это выглядит, но качественная вёрстка требует предсказуемости.

Предсказуемый CSS начинается с четырёх вещей:

селекторы: как точно выбрать нужные элементы

каскад: что делать, если правил несколько и они конфликтуют

наследование: какие свойства «переезжают» к потомкам автоматически

единицы измерения: как задавать размеры так, чтобы интерфейс был удобным и масштабируемым

Ключевой принцип: чем лучше семантика и структура HTML, тем проще CSS и тем меньше «переопределений».

Как подключать CSS и как читать правило

CSS состоит из правил вида: селектор + набор деклараций.

button в примере — имя класса внутри селектора .button

padding и font-size — свойства

12px, 16px — значения

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

Селекторы: как выбирать элементы

Селектор — это условие, по которому браузер находит элементы и применяет к ним правила.

Базовые типы селекторов

| Тип селектора | Пример | Что выбирает | Когда использовать | |---|---|---|---| | По тегу | button | все элементы этого типа | для базовой типографики и нормализации поведения элементов | | По классу | .card | элементы с классом card | основной рабочий инструмент для компонентов | | По идентификатору | #promo | элемент с заданным id | редко в CSS, чаще для якорей и скриптов | | Универсальный | * | все элементы | осторожно, чаще для сбросов и отладки |

Практика качественной вёрстки: чаще всего стили строятся на классах, потому что это удобно переиспользовать и контролировать.

Комбинаторы: связи между элементами

Комбинаторы помогают выбирать элементы по расположению в дереве.

| Комбинатор | Пример | Смысл | |---|---|---| | Потомок | .nav a | все подходящие элементы внутри другого элемента на любой глубине | | Непосредственный ребёнок | .list > .item | только элементы, которые являются прямыми детьми | | Соседний | .title + .subtitle | элемент сразу после другого | | Общий сосед | .title ~ .note | все элементы-соседи ниже по потоку |

Если HTML семантичен и логично сгруппирован, часто достаточно коротких селекторов, без «лесенок» из вложенности.

Группировка селекторов

Одинаковые стили можно применить сразу к нескольким селекторам.

Атрибутные селекторы

Они выбирают элементы по наличию или значению атрибута.

[disabled] выбирает элементы с атрибутом disabled

^= означает «значение начинается с»

Псевдоклассы: состояние

Псевдокласс описывает состояние или позицию элемента.

Практически важные псевдоклассы:

:hover и :focus для интерактивности

:disabled и :checked для форм

:first-child, :last-child, :nth-child() для списков и сеток

Псевдоэлементы: часть элемента

Псевдоэлемент — это «виртуальная» часть элемента, которую можно стилизовать.

Запомните:

:something обычно про состояние

::something обычно про часть

Каскад: почему побеждает одно правило, а не другое

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

!Диаграмма принятия решения в каскаде CSS

Практически (в рамках обычной вёрстки) чаще всего решают два пункта:

специфичность селектора

порядок правил в коде

Специфичность: «вес» селектора

Специфичность — это способ сравнить селекторы по «точности». В упрощённом виде:

#id почти всегда сильнее, чем класс

класс почти всегда сильнее, чем селектор по тегу

Таблица для интуиции:

| Селектор | Пример | Условный «вес» | |---|---|---| | По тегу | button | низкий | | По классу, атрибуту, псевдоклассу | .button, [disabled], :focus | средний | | По id | #checkout | высокий |

Сравнение на примере:

Если элемент подходит под оба правила (у него есть и класс button, и id buy), победит #buy.

Порядок правил: последнее слово

Если специфичность одинаковая, побеждает правило, которое написано ниже.

В итоге будет 16px, потому что второе правило позже.

Почему стоит избегать id в CSS

Сильные селекторы повышают цену изменений.

приходится «перебивать» их ещё более сильными правилами

растёт количество переопределений

ухудшается переиспользование компонентов

Хорошая практика: стилизовать компоненты классами, а id оставить для уникальных задач, не связанных со стилями.

Про !important

!important повышает приоритет декларации и часто ломает нормальную работу каскада.

Используйте только когда вы осознанно ограничены:

нужно переопределить сторонние стили (например, готовой библиотеки)

нужно быстро локализовать конфликт, а затем запланировать рефакторинг

Наследование: что передаётся потомкам автоматически

Часть CSS-свойств наследуется: если вы задали их родителю, они применятся и к потомкам, пока вы не переопределите.

Обычно наследуются свойства, связанные с текстом:

color

font-family

font-size

line-height

Обычно не наследуются свойства, связанные с геометрией и коробкой:

margin, padding

border

width, height

background

Практический вывод:

общие текстовые настройки удобно задавать на контейнере (или на корневом уровне проекта)

размеры, отступы и рамки задавайте точечно компонентам

Если нужно явно управлять наследованием, существуют значения:

inherit — принудительно взять значение у родителя

initial — сбросить к значению по умолчанию в спецификации

Единицы измерения: как задавать размеры правильно

Единицы измерения влияют на адаптивность, доступность и предсказуемость.

Абсолютные и относительные единицы

| Единица | Тип | Относительно чего | Типичные применения | |---|---|---|---| | px | условно абсолютная | пиксели CSS | рамки, тонкие линии, небольшие точные размеры | | % | относительная | чаще всего размер родителя | ширины колонок, резиновые блоки | | em | относительная | текущий font-size элемента | локальные отступы, размеры, завязанные на текущий текст | | rem | относительная | font-size корневого уровня | масштабируемая типографика и размеры, единые по проекту | | vw, vh | относительная | размер окна просмотра | крупные секции, полноэкранные блоки, осторожно на мобильных |

px: когда нормально

px предсказуем и прост, но не всегда удобен для масштабирования интерфейса. Хорошая практика:

использовать px для тонких рамок, теней, мелких деталей

не строить всю типографику только на px, если важна масштабируемость

em и rem: ключевая разница

em зависит от размера шрифта самого элемента

rem зависит от размера шрифта корневого уровня

Что это даёт:

rem проще для системных размеров (типографика, сетка отступов), потому что он стабилен

em удобен внутри компонента, где размеры должны «расти» вместе с текстом

Пример идеи в CSS:

Здесь:

padding у карточки масштабируется от общего масштаба проекта

margin-bottom заголовка масштабируется от размера самого заголовка

Проценты

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

Важно помнить: для разных свойств «база» процентов отличается. Например, width: 50% обычно считается от ширины родителя, а вот некоторые вертикальные проценты имеют нюансы. Если поведение кажется странным, это повод посмотреть специфику свойства в документации.

line-height без единиц

Для межстрочного интервала часто используют безразмерное значение:

Это означает: высота строки равна font-size, умноженному на 1.5. Плюс такого подхода в том, что при изменении размера шрифта межстрочный интервал подстраивается автоматически.

Практические принципы качественного CSS на этом этапе

Пишите селекторы короткими и устойчивыми: чаще классы, реже глубокая вложенность.

Избегайте гонки специфичности: не «усиливайте» селекторы без необходимости.

Полагайтесь на наследование для типографики и общих текстовых свойств.

Выбирайте единицы осознанно: rem для системных размеров, em для локальной привязки к тексту, px для деталей.

Полезные источники

MDN: Начало работы с CSS

MDN: Селекторы CSS

MDN: Каскад и наследование

MDN: Специфичность

MDN: Значения и единицы измерения

Что дальше по курсу

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

Современная раскладка: Flexbox и CSS Grid

Как эта тема связана с предыдущими

В прошлых статьях вы заложили основу качественной вёрстки:

HTML даёт смысловую структуру (заголовки, секции, навигация, формы)

CSS даёт управляемые стили: селекторы, каскад, наследование, единицы

Теперь мы решаем следующую практическую задачу: как раскладывать блоки на странице современными средствами, чтобы:

разметка была читаемой и предсказуемой

компоненты легко переиспользовались

адаптивность не превращалась в набор случайных хакающих правил

Для этого в современном CSS есть два ключевых инструмента: Flexbox и CSS Grid.

Flexbox и Grid: что выбрать

И Flexbox, и Grid решают задачу раскладки, но оптимальны для разных сценариев.

| Инструмент | Модель раскладки | Лучше всего подходит для | Типичный пример | |---|---|---|---| | Flexbox | одномерная (одна ось за раз) | выравнивание и распределение элементов в строке или колонке | навигация, кнопки, карточки в ряд, элементы формы | | CSS Grid | двумерная (строки и колонки одновременно) | построение сеток и зон страницы | лейаут страницы, галереи, сложные карточные сетки |

Простой ориентир:

если вы мыслите рядом или столбцом и важны выравнивания по одной оси — берите Flexbox

если вы мыслите сеткой (и по горизонтали, и по вертикали) — берите Grid

Оба инструмента часто используются вместе: например, общий каркас страницы на Grid, а внутренности карточки — на Flexbox.

Flexbox: раскладка по одной оси

Flexbox работает через связку:

flex-container — родитель, которому задано display: flex или display: inline-flex

flex-items — его прямые дети

!Схема осей Flexbox и свойств выравнивания

Главная и поперечная оси

главная ось задаётся flex-direction

- row — элементы идут слева направо - column — элементы идут сверху вниз

поперечная ось всегда перпендикулярна главной

От осей зависит логика выравнивания:

justify-content выравнивает вдоль главной оси

align-items выравнивает вдоль поперечной оси

Минимальный пример

Ключевое:

gap задаёт расстояния между элементами без margin-хакинга

дочерние элементы автоматически становятся flex-items

Управление направлением: flex-direction

Практический смысл:

один и тот же набор элементов можно легко перестроить из ряда в колонку, например в адаптиве

Перенос на новую строку: flex-wrap

По умолчанию Flexbox старается уместить всё в одну линию.

Это удобно для “облака тегов”, кнопок-фильтров и похожих элементов, где допустим перенос.

Выравнивание элементов

Частые комбинации:

горизонтальное распределение с расстояниями

центрирование блока по двум осям

Замечание: центрировать текст и элементы — разные задачи. Flex выравнивает именно элементы.

Как элементы занимают свободное место: flex-grow, flex-shrink, flex-basis

У каждого flex-item есть поведение по трём параметрам:

flex-basis — “база” размера до распределения свободного места

flex-grow — может ли элемент расти, если есть свободное место

flex-shrink — может ли элемент сжиматься, если места не хватает

Чаще всего используют сокращение flex.

Пример: левый блок фиксированный, правый заполняет остальное.

Расшифровка:

0 0 260px — не расти, не сжиматься, базовый размер 260px

1 1 auto — расти и сжиматься можно, размер зависит от контента

Практика качественной вёрстки:

для типографики и отступов часто удобнее относительные единицы (rem, em), а не “магические” px

размеры сайдбаров и колонок задавайте так, чтобы они работали в узких окнах (часто нужны медиазапросы)

Типичные ошибки во Flexbox

путать justify-content и align-items (всё зависит от flex-direction)

пытаться строить сложную двумерную сетку на Flexbox и получать “ломающиеся” ряды

делать слишком сложные селекторы ради выравнивания вместо добавления одного класса контейнеру

CSS Grid: двумерная раскладка

Grid задаёт раскладку сразу по двум направлениям:

строки (rows)

колонки (columns)

Как и у Flexbox:

контейнеру задаётся display: grid

прямые дети становятся grid-items

!Сетка Grid: колонки, строки, фракции и области

Треки и единица fr

Grid вводит удобную единицу: fr — доля свободного пространства.

Здесь две колонки делят доступную ширину в пропорции 1:2.

repeat() для повторяющихся колонок

Это читается как: “три колонки одинаковой ширины”.

Адаптивная сетка без точек перелома: auto-fit и minmax()

Один из самых практичных приёмов Grid — автоматически укладывать карточки по ширине контейнера.

Что происходит:

minmax(220px, 1fr) говорит: “колонка не меньше 220px, но может растягиваться”

auto-fit говорит: “помести столько колонок, сколько влезет”

Результат: на широком экране карточек в ряд больше, на узком — меньше, без ручного перечисления брейкпоинтов.

Явная и неявная сетка

явная сетка — то, что вы описали в grid-template-columns и grid-template-rows

неявная сетка — то, что Grid создаёт автоматически, если элементов больше, чем места в явной

Если вы ожидаете много строк, часто полезно задать поведение неявных строк:

Размещение элементов: линии и области

Есть два подхода.

#### Размещение по линиям

Идея:

grid-column: 1 / -1 означает “занять от первой до последней линии”, то есть всю ширину

#### Размещение через grid-template-areas

Этот способ часто максимально читаемый для каркаса страницы.

Плюсы:

раскладка читается как схема

легко менять расположение в адаптиве, не трогая HTML

Выравнивание в Grid

В Grid тоже есть выравнивание, но оно делится на:

выравнивание всей сетки внутри контейнера (justify-content, align-content)

выравнивание элементов внутри ячеек (justify-items, align-items)

Практически чаще всего нужны:

align-items: start или stretch в зависимости от задачи

gap вместо ручных отступов между ячейками

Типичные сценарии: что делать чем

Навигация и панели действий

Обычно Flexbox:

элементы в линию

выравнивание по центру

перенос при необходимости

Каркас страницы

Часто Grid:

шапка, сайдбар, контент, подвал

удобное перестроение зон на разных ширинах

Сетка карточек

если карточки одинаковой высоты и важна сетка — Grid

если карточки просто выстраиваются в ряд и допустим перенос — Flexbox с flex-wrap

Практические принципы качественной раскладки

Начинайте с семантического HTML: контейнеры должны отражать смысл, а не “нужен div для сетки”.

Описывайте раскладку на родителе: display: flex или display: grid — это ответственность контейнера.

Используйте gap для расстояний внутри раскладки: меньше побочных эффектов, чем у margin.

Держите селекторы короткими и устойчивыми (чаще классы): это снижает конфликты в каскаде.

Выбирайте единицы осознанно: rem для системных отступов и размеров, fr для долей в Grid.

Полезные источники

MDN: Основы Flexbox

MDN: Основы Grid

MDN: gap

MDN: grid-template-areas

Что дальше по курсу

Следующий шаг после освоения Flexbox и Grid — собирать компоненты и страницы так, чтобы они были устойчивыми: типографика, состояния элементов, адаптивность, и организация CSS (чтобы каскад работал на вас, а не против вас).

Адаптивность: media queries, типографика и изображения

Зачем адаптивность нужна в качественной вёрстке

В прошлых темах вы научились:

строить семантический HTML (структура, заголовки, формы)

писать управляемый CSS (селекторы, каскад, наследование, единицы)

делать раскладку Flexbox и Grid

Адаптивность связывает всё это в единый результат: интерфейс должен оставаться читаемым, удобным и устойчивым на разных размерах экрана, с разными способами ввода (мышь, тач), и при разной плотности пикселей.

Качественная адаптивность обычно держится на трёх опорах:

media queries: подключаем правила только при нужных условиях

типографика: текст и ритм масштабируются предсказуемо

изображения: не ломают сетку и не грузят лишнее

Базовая стратегия: mobile-first и работа с каскадом

Адаптивный CSS проще поддерживать, если вы используете подход mobile-first:

базовые стили пишутся для узкого экрана

далее вы добавляете улучшения через условия @media (min-width: ...)

Это хорошо сочетается с каскадом:

чем шире экран, тем ниже в файле появляются уточняющие правила

вы меньше «перебиваете» стили, а больше их наращиваете

!Визуально показывает идею mobile-first и порядок подключения улучшений

Media queries: как они устроены и как их писать

Что такое media query

Media query — это условие, при котором браузер применяет часть CSS.

Синтаксис выглядит так:

Здесь:

@media — начало правила

(min-width: 768px) — условие

внутри блока — обычные CSS-правила

Источник: MDN: Использование медиа-выражений

min-width и max-width

Два самых частых подхода:

min-width — начиная с ширины X и выше (удобно для mobile-first)

max-width — до ширины X включительно (удобно, если вы «урезаете» десктопную версию)

Практика для курса: используйте min-width как основной вариант, чтобы ваш CSS «рос» вместе с возможностями экрана.

Как выбирать брейкпоинты

Брейкпоинт — это не «под конкретный телефон». Он должен появляться, когда контенту становится тесно.

Хороший критерий:

строка текста стала слишком длинной или слишком короткой

карточки стали нечитабельны

кнопки и поля стали слишком плотными

в сетке появился «некрасивый» перенос, который ухудшает восприятие

Удобная практика:

начните с базовой версии

постепенно расширяйте окно

добавляйте брейкпоинт там, где дизайн реально начинает ломаться

Несколько условий и логика

Можно комбинировать условия:

Смысл:

эффект наведения включается только там, где устройство действительно поддерживает нормальный hover

Источники:

MDN: hover (media feature)

MDN: pointer (media feature)

Медиавыражения про доступность и среду

Помимо ширины, полезны условия:

prefers-reduced-motion — пользователь просит меньше анимаций

prefers-color-scheme — тёмная или светлая тема

Пример уменьшения движения:

Источники:

MDN: prefers-reduced-motion

MDN: prefers-color-scheme

Адаптивная типографика: чтобы текст оставался удобным

Почему типографика — центр адаптивности

Если текст читается плохо, не спасёт ни Grid, ни Flexbox.

Основные цели:

разумная длина строки

предсказуемые размеры шрифта

стабильный вертикальный ритм (отступы и межстрочный интервал)

Единицы: где уместны rem, em, %

Из предыдущей статьи про единицы измерения важны два вывода:

rem удобно для системных размеров (базовый текст, крупные шаги отступов)

em удобно для локальных размеров внутри компонента (когда всё должно расти вместе с конкретным текстом)

Практический шаблон:

Ограничение ширины текста

Слишком широкие текстовые блоки ухудшают чтение. Частая практика:

Здесь ch — единица, приблизительно равная ширине символа 0 в текущем шрифте. Она удобна для контроля длины строки.

Источник: MDN: ch

Плавная типографика через clamp()

Чтобы размер шрифта плавно менялся между минимумом и максимумом, можно использовать clamp():

Как это читать:

1.5rem — минимальный размер (ниже не опускаемся)

2vw + 1rem — желаемое «плавающее» значение, зависящее от ширины окна

2.5rem — максимальный размер (выше не растём)

Важно: это не «магия», а способ поставить предсказуемые границы.

Источник: MDN: clamp()

Отступы тоже должны быть адаптивными

Адаптивность — это не только шрифт, но и плотность интерфейса. Часто отступы логично увеличивать на широких экранах:

Адаптивные изображения: чтобы не ломали сетку и не грузили лишнее

Базовое правило: изображение не должно вылезать из контейнера

Если вы используете изображения как контент (внутри статьи, карточки, профиля), важно сделать их «резиновыми»:

Идея:

max-width: 100% не даёт изображению стать шире контейнера

height: auto сохраняет пропорции

display: block убирает лишний зазор, который бывает у строчных элементов

Управление кадрированием: object-fit

Когда у изображения фиксированный контейнер (например, превью карточки), часто нужно аккуратное кадрирование:

Смысл:

aspect-ratio задаёт ожидаемую пропорцию блока

object-fit: cover заполняет область и обрезает лишнее, сохраняя пропорции

Источники:

MDN: object-fit

MDN: aspect-ratio

Изображения разного качества под разные экраны

Есть две разные задачи:

разные размеры для разных ширин контейнера

разная плотность (обычный экран и экран высокой плотности)

На уровне HTML для этого существуют механизмы srcset и sizes (для контентных изображений). На уровне CSS для фоновых изображений можно использовать image-set().

Пример для фонового изображения:

Источник: MDN: image-set()

Советы по качеству и производительности

выбирайте формат осознанно: современные форматы (например, WebP, AVIF) часто дают меньший вес при хорошем качестве

не отправляйте пользователю «огромную картинку», если она в интерфейсе маленькая

проверяйте, что важные изображения не превращаются в фон там, где нужен смысл (например, изображение товара или аватар обычно является контентом)

Практические паттерны адаптивной вёрстки

Паттерн: сетка карточек, которая сама перестраивается

Grid может закрыть много адаптивных задач без брейкпоинтов:

Это продолжение идеи из темы про Grid: карточек помещается столько, сколько влезет.

Паттерн: поменять направление Flexbox на широком экране

На узком экране — колонка, на широком — ряд.

Паттерн: разные состояния для тача и мыши

Если вы полагаетесь на hover-эффекты, включайте их осторожно:

Типичные ошибки

делать брейкпоинты «под устройства», а не под контент

пытаться решить адаптивность только медиазапросами, игнорируя резиновые единицы и возможности Grid

не ограничивать ширину текстовых блоков, из-за чего на широких экранах читать неудобно

не делать изображения резиновыми, из-за чего они вылезают из контейнера

включать hover-эффекты на тач-устройствах и получать «липкие» состояния

Полезные источники

MDN: Использование медиа-выражений

MDN: prefers-reduced-motion

MDN: clamp()

MDN: object-fit

MDN: Responsive images (Learn)

Что дальше по курсу

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

Качество вёрстки: доступность, BEM, оптимизация и отладка

Зачем нужна качество вёрстки после Flexbox, Grid и адаптивности

На предыдущих этапах курса вы научились:

строить семантический HTML как структуру смысла

управлять каскадом, наследованием и единицами в CSS

собирать раскладку на Flexbox и Grid

делать адаптивность через media queries, типографику и изображения

Теперь важен следующий уровень: чтобы результат был устойчивым в реальном проекте. Качественная вёрстка — это когда страница:

доступна для разных пользователей и способов ввода

легко поддерживается и расширяется без «войны со стилями»

быстро загружается и не расходует лишние ресурсы

предсказуемо отлаживается, когда что-то ломается

Эта тема связывает всё вместе: доступность, BEM как договорённость о структуре CSS, оптимизация, отладка.

!Как тема качества опирается на предыдущие темы курса

Доступность: что это и с чего начать

Доступность (accessibility, часто пишут a11y) — это свойство интерфейса оставаться usable для людей с разными возможностями и контекстами:

пользователь работает только клавиатурой

пользователь использует скринридер

у пользователя снижено зрение и увеличен масштаб

устройство сенсорное, нет нормального наведения

пользователь просит меньше анимации

Базовые ориентиры по доступности:

W3C WAI: Introduction to Web Accessibility

MDN: Что такое доступность

Семантика как основа доступности

То, что вы делали в теме про семантику HTML, напрямую влияет на доступность:

заголовки образуют логичную иерархию

навигация — это навигация, основной контент — это основной контент

списки — это списки, а не «набор строк»

Практический эффект: скринридеру проще объяснить пользователю структуру страницы, а пользователю проще перемещаться по ней.

Клавиатура: фокус и порядок обхода

Интерфейс считается базово доступным, если им можно пользоваться без мыши.

Проверьте минимум:

все интерактивные элементы доступны через Tab

порядок фокуса соответствует визуальному порядку

фокус заметен визуально

Частая ошибка качества: убрать фокус ради «красоты».

outline: none без замены почти всегда ухудшает доступность

если вы делаете кастомный фокус, он должен быть контрастным и заметным

Пример безопасного подхода к фокусу:

Здесь логика такая:

:focus нужен как универсальная страховка

:focus-visible показывает фокус в сценариях, где он действительно нужен (обычно клавиатура)

Справка:

MDN: :focus-visible

Формы: подписи, ошибки и подсказки

В теме про формы вы уже видели ключевую связку: у поля должна быть подпись label.

Правила качества для форм:

placeholder не заменяет подпись

ошибка должна быть понятна и привязана к конкретному полю

состояние ошибки должно быть видно не только цветом

Частая практика для состояния ошибки:

Здесь важно, что ошибка:

имеет отдельный текст (не только красная рамка)

визуально отличается

Минимум про ARIA: когда и как не навредить

ARIA-атрибуты помогают описывать смысл и состояние, когда одной семантики не хватает. Но их легко использовать неправильно.

Правило качества:

сначала семантические элементы и правильная структура

ARIA — только для уточнения роли или состояния, когда иначе нельзя

Источник:

MDN: ARIA

BEM: договорённость, которая делает CSS поддерживаемым

После темы про селекторы и каскад становится ясно: качество CSS сильно зависит от того, насколько предсказуемо устроены классы.

BEM (Block, Element, Modifier) — это методология именования и организации классов, которая помогает:

писать короткие и устойчивые селекторы

снижать конфликты специфичности

проектировать компоненты как независимые блоки

Официальный источник:

BEM: Methodology

Термины BEM простыми словами

| Термин | Что это означает | Пример в классе | |---|---|---| | Блок | самостоятельный компонент | card, button, field | | Элемент | часть блока, зависящая от него | card__title, field__input | | Модификатор | вариант блока или элемента | button--primary, field__input--error |

Важная идея: блок должен быть переносимым. Если вы копируете блок в другое место страницы, он не должен «ломаться».

Как BEM помогает каскаду

BEM обычно ведёт к селекторам вида:

один класс на правило

минимум вложенности

Это снижает риск конфликтов специфичности, о которых вы узнали в теме про каскад.

Плохой симптом (не обязательно всегда ошибка, но частый источник проблем):

глубокие селекторы с привязкой к месту в дереве

стили «по контексту», которые сложно переносить

Хороший симптом:

стили описывают компонент, а не случайное место, где он стоит

Пример: компонент кнопки

Что здесь про качество:

базовое поведение в .button

варианты через модификаторы

состояние :disabled не требует увеличения специфичности

Частые ошибки в BEM

делать элементы элементами другого блока по смыслу, потому что «так удобнее селектор»

превращать модификатор в «новый блок» без необходимости

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

!Как блок, элементы и модификаторы соотносятся с реальной разметкой компонента

Оптимизация: быстрый интерфейс как часть качества

Оптимизация в рамках HTML и CSS — это не «микрохитрости», а дисциплина:

не грузить лишнее

не делать стили дорогими в поддержке

не заставлять браузер выполнять ненужную работу

Оптимизация CSS как системы

Что обычно даёт заметный эффект:

меньше конфликтов в каскаде, меньше переопределений

меньше «одноразовых» классов, больше переиспользуемых компонентов

единая система размеров (часто на rem), чтобы не плодить случайные значения

Практика:

держите селекторы короткими

избегайте стилей «по месту»

не используйте !important как постоянный инструмент

Оптимизация изображений

Из темы про адаптивные изображения важны два качества:

изображение не ломает сетку

изображение не грузится больше нужного

Практические ориентиры:

используйте современные форматы (WebP, AVIF), если ваш пайплайн позволяет

отдавайте разные размеры под разные ширины контейнера

указывайте ожидаемую пропорцию (например, через aspect-ratio), чтобы уменьшить скачки макета

Справка:

MDN: Responsive images

MDN: aspect-ratio

Оптимизация шрифтов на уровне CSS

Шрифты часто дают задержку в отображении текста. Даже без углубления в сборку можно держать базовые принципы качества:

ограничивать количество начертаний

не подключать лишние семейства

следить за читаемостью системных fallback-шрифтов

Полезная справка:

MDN: font-display

Уважение к настройкам пользователя

Качество — это учитывать предпочтения:

уменьшать анимации при prefers-reduced-motion

поддерживать тёмную тему при prefers-color-scheme, если она заявлена в проекте

Пример:

Справка:

MDN: prefers-reduced-motion

Отладка: как быстро находить причины, а не «тыкать наугад»

Отладка вёрстки — это навык превращать симптом в причину.

Базовый алгоритм отладки

Зафиксируйте симптом: что именно не так и при каких условиях.

Локализуйте участок: какой компонент и какое состояние.

Проверьте раскладку: Flexbox или Grid, размеры, переполнение.

Проверьте каскад: кто задаёт свойство, кто переопределяет, почему.

Проверьте адаптив: какие @media активны, нет ли конфликтов.

Проверьте доступность: есть ли фокус, не пропали ли подписи, читается ли структура.

!Алгоритм поиска причины проблемы в вёрстке

Инструменты браузера, которые стоит освоить

Практический минимум в DevTools:

инспектор элементов и панель стилей, чтобы видеть источник правила

computed-значения, чтобы понять итог после каскада

переключение псевдосостояний :hover, :focus, :active

просмотр Flexbox и Grid оверлеев

проверка доступности и дерева accessibility (в разных браузерах называется по-разному)

Справка:

Chrome DevTools: Overview

Как отлаживать каскад и специфичность

Типовой сценарий: «я поставил margin, но он не применяется».

Что проверить:

есть ли более специфичное правило, которое перебивает

нет ли стиля ниже по файлу с тем же селектором

не стоит ли !important в другом месте

Практика качества:

вместо усиления селектора попробуйте упростить архитектуру: добавить модификатор, выделить элемент, пересобрать компонент

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

Частые причины «ломается адаптив»:

фиксированная ширина там, где нужна резина

длинная строка без переносов ломает контейнер

изображение без max-width: 100% вылезает наружу

Полезные приёмы:

временно включить рамки и фон, чтобы увидеть реальные размеры

проверять overflow у контейнеров

проверять min-width у flex-элементов, когда текст выталкивает колонку

Справка по нюансам Flexbox:

MDN: flex

Как отлаживать качество по метрикам

Даже без глубокого погружения в производительность полезно прогонять страницу через анализаторы.

Два популярных инструмента:

Lighthouse

WebPageTest

Используйте их как подсказку куда смотреть, а не как «единую оценку качества».

Мини-чеклист качества перед сдачей вёрстки

| Область | Что проверить | Типичная проблема | |---|---|---| | Доступность | есть видимый фокус, форма читается, структура заголовков логична | фокус скрыт, подписи полей отсутствуют | | CSS-архитектура | компоненты оформлены классами, варианты через модификаторы | стили завязаны на контекст и ломаются при переносе | | Адаптивность | контент не «расползается», изображения резиновые | фиксированные ширины ломают сетку | | Производительность | нет очевидно лишних крупных изображений и шрифтов | тяжелые ресурсы ради мелкого UI | | Отладка | проблемы локализуются быстро, причины понятны | «лечим» симптом через усиление селекторов |

Что дальше

Эта тема завершает базовый цикл курса: вы не только умеете собрать страницу, но и умеете сделать её качественной.

Если вы продолжите развитие, следующий логичный шаг за пределами базового плана курса:

компонентный подход к интерфейсам

систематизация дизайн-токенов (шкалы отступов, типографика)

продвинутая оптимизация загрузки (сборка, критический CSS, стратегия шрифтов)

Главное: качество вёрстки — это не набор трюков, а устойчивые привычки в структуре, стилях, адаптивности и проверке результата.