Священный грааль

Классический каркас: шапка, меню, контент, сайдбар, футер.

Уровень: средний 10 разделов 15 минут

1. Что это и зачем

Классический каркас: шапка, меню, контент, сайдбар, футер.

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

{title} — это методичность: чек-лист перед сдачей страницы экономит ревью и баги пользователям.

2. Синтаксис и пример

.page { display: grid; grid-template-areas: "header header" "nav main" "footer footer"; grid-template-columns: 200px 1fr; min-height: 100vh; }

Запись выше — базовый вариант использования. Обратите внимание, как священный грааль вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Приёмы охватывают процесс целиком: от сброса стилей до пул-реквеста. Инструменты (линтеры, валидаторы, аудит Lighthouse) автоматизируют проверки, оставляя человеку решения по смыслу.

В реальной разметке священный грааль встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это методичность: чек-лист перед сдачей страницы экономит ревью и баги пользователям.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

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

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Футер прижат к низу через min-height: 100vh.

Прокрутка страницы должна оставаться на body.

7. Практическое задание

Соберите священный грааль на grid.

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

.page { display: grid; grid-template-areas: "header header" "nav main" "footer footer"; grid-template-columns: 200px 1fr; min-height: 100vh; }

8. Как применять в проектах

Процесс встраивается в работу: структура стилей в проекте, отладка в DevTools, проверка доступности и производительности перед публикацией.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

файлы стилей организованы по назначению;
проект проходит линтер и валидатор;
devtools-отладка: computed, box model, specificity;
контраст и производительность проверены;
правила не дублируют друг друга;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам