Прежде чем переходить к адаптивной вёрстке и настоящим Grid/Flex-проектам, стоит проверить, что CSS-основы уже «в мышечной памяти»: каскад и специфичность, блочная модель, живой Flexbox и Grid, медиа-запросы и переменные. Это не новый приём, а сборка уже пройденного - большая проверка перед тем, как вёрстка станет самостоятельной практикой, а не серией отдельных уроков.
В этом уроке
Эта карточка собирает сразу три приёма курса: переменная --accent одной кнопкой красит сразу аватар, рамку и текст (урок 51); отступы посчитаны формулами calc(var(--gap) * 1.5) и calc(var(--gap) * 2) от одной и той же переменной (урок 52); а слайдер ширины по-настоящему меняет размер карточки и в реальном времени переключает её из строки в колонку по правилу @media (max-width:260px) (урок 49). Список внизу - не украшение, а настоящая проверка вычисленных значений: попробуй представить, что было бы, если бы формула calc() содержала опечатку - соответствующая строка сразу показала бы ✘.
Основы CSS: селекторы, текст, цвета и фоны
Селектор побеждает не потому, что он ниже по файлу, а по специфичности - это трёхуровневое сравнение (инлайн-стиль, id, класс/атрибут/псевдокласс, тег), а не сумма чисел, и порядок в файле решает только при полном равенстве специфичности. Текстовые свойства (color, font-family) наследуются, а свойства блочной модели - нет. rem всегда считается от корня и не накапливается при вложенности, в отличие от em. rgba() теперь формально псевдоним rgb() с альфа-каналом.
| Проверить | Урок |
|---|---|
| Каскад и специфичность - не "последнее правило побеждает", а сравнение уровней | 10. Каскад и специфичность |
| Что наследуется, а что нет | 11. Наследование |
| HEX/RGB/именованные цвета | 12. Цвет текста |
| em компаундится, rem - нет | 15. px, em, rem |
| rgba() как альфа-канал, а не отдельная функция | 19. HEX, RGB, RGBA |
| background-clip по умолчанию border-box | 18. Цвет фона |
Блочная модель и раскладка: box model, Flexbox, Grid, позиционирование
По умолчанию box-sizing: content-box - итоговая ширина блока больше заданной width на все padding и border, и это главный источник "поплывшей" вёрстки у новичков; border-box делает width финальным значением. Во Flexbox justify-content работает по главной оси, а align-items - по поперечной, и space-around даёт вдвое меньший крайний отступ, чем space-between между элементами. В Grid единица fr делит свободное место точно, а не примерно. position: relative без единого смещения всё равно создаёт контекст для абсолютных потомков, а z-index сначала сравнивается между контейнерами одного уровня наложения - и только потом между их потомками.
| Проверить | Урок |
|---|---|
| Блочная модель и формула ширины | 21. Блочная модель |
| box-sizing: border-box делает width финальным | 26. box-sizing |
| Flexbox: выравнивание по главной оси | 30. Flexbox |
| justify-content: space-around/space-between/space-evenly | 32. justify-content |
| Grid и единица fr | 35. CSS Grid |
| position: relative создаёт контекст даже без смещения | 39. Основы position |
| Ловушка stacking-context у z-index | 44. z-index |
Адаптивность и современный CSS: медиа-запросы, переменные, calc()
Медиа-запросы работают лучше всего, когда привязаны к содержимому, а не к конкретным устройствам; гибкое изображение - это img{max-width:100%;height:auto}, без которого картинка просто отображается в своём естественном размере и вылезает за пределы узкого блока. CSS-переменные, в отличие от Sass, живут в реальном времени и участвуют в каскаде - их можно менять из JavaScript без перезагрузки страницы, а опечатка в имени переменной откатывает свойство к значению по умолчанию без единой ошибки в консоли. calc() позволяет смешивать разные единицы измерения в одной формуле, но требует обязательных пробелов вокруг + и -.
| Проверить | Урок |
|---|---|
| Адаптивный дизайн: три компонента подхода | 45. Адаптивный дизайн |
| Медиа-запросы: and/или/not | 49. Медиа-запросы |
| Гибкие изображения: max-width:100% | 50. Гибкие изображения |
| Переменные: var() и запасное значение | 51. Переменные CSS |
| calc(): смешивание единиц и обязательные пробелы | 52. Функция calc() |
Топ ошибок за весь курс
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Путают "правило ниже побеждает" с реальной специфичностью | Неожиданно проигрывает более специфичному селектору выше по файлу | Помнить: специфичность сравнивается по уровням (инлайн/id/класс/тег), а порядок решает только при точном равенстве |
| Забывают, что box-sizing по умолчанию content-box | Итоговая ширина блока оказывается больше заданной width на padding и border | Ставить box-sizing: border-box глобально, если это не сделано в самом начале проекта |
| Считают, что z-index потомка побеждает всегда | Большой z-index у вложенного элемента проигрывает соседнему контейнеру с более высоким z-index | Проверять z-index контейнеров одного уровня наложения раньше, чем z-index их потомков |
| Опечатка в имени CSS-переменной | var(--tipo) молча возвращает значение по умолчанию, без единой ошибки в консоли | Задавать var() с запасным значением: var(--gap, 12px) - и внимательно сверять имя |
| Забытый пробел перед минусом в calc() | calc(50% -8px) ломает всё выражение целиком, а не только вычитание | Всегда окружать + и - пробелами с обеих сторон |
| Забытый max-width:100% на img | Картинка вылезает за пределы блока на маленьких экранах | img{max-width:100%;height:auto} по умолчанию для всех content-изображений |
Итоговая шпаргалка по CSS-основам
| Тема | Главное |
|---|---|
| Специфичность | Инлайн > id > класс/атрибут/псевдокласс > тег - сравнение по уровням, не сумма |
| box-sizing | border-box - width включает padding и border, обычно удобнее content-box |
| Flexbox (главная ось) | justify-content: flex-start/center/space-between/space-around/space-evenly |
| Grid | fr делит свободное место точно; repeat() для повторяющихся колонок |
| Позиционирование | relative создаёт контекст для absolute-потомков даже без смещения; z-index сравнивается по контейнерам |
| Адаптивность | img{max-width:100%;height:auto} + медиа-запросы по содержимому, не по устройствам |
| Переменные и calc() | var(--x, запасное) на случай опечатки; calc() пересчитывается в реальном времени |
Коротко: отвечаем на вопросы
Сколько времени нужно, чтобы CSS-основы стали действительно "в мышечной памяти"?
Единого числа нет - изучить синтаксис можно за несколько недель, но уверенность появляется только через практику на реальных макетах, а не через повторное чтение теории. Регулярность важнее общего количества часов: собрать несколько небольших страниц самостоятельно куда полезнее одного длинного марафона теории.
Как проверить свою вёрстку перед тем, как считать её готовой?
Именно так, как устроен этот чек-лист: пройтись по блочной модели (не "поплыла" ли ширина из-за box-sizing), по адаптивности на нескольких реальных ширинах экрана, и отдельно перепроверить любые calc() и var() - опечатки в них не показывают ошибку в консоли, а просто молча откатывают значение к умолчанию.
Что учить дальше после CSS-основ?
Логичный следующий шаг - оживить уже освоенную статичную вёрстку: раздел «Анимации» уже есть в меню «Программа» сайта как следующая по порядку тема. Здесь же, в CSS-основах, уже заложена база: переменные и calc() из последних уроков нередко используются именно в анимациях и переходах.
