CSS

Каждый HTML-элемент — это прямоугольник из контента, padding, border и margin. Понимание Box Model — основа CSS-вёрстки.

Flexbox — одномерная система раскладки для распределения пространства и выравнивания элементов в строке или столбце.

CSS Grid — двумерная система раскладки для создания сложных сеток по строкам и колонкам одновременно.

CSS Custom Properties позволяют хранить значения в переменных, переиспользовать их и изменять динамически через JavaScript.

Специфичность определяет, какой CSS-правило применится при конфликте стилей. Понимание специфичности помогает избежать !important.

Адаптивная верстка CSS — media queries, подход mobile-first, breakpoints, container queries, @container и советы по отзывчивому дизайну.

Анимации в CSS — transition для простых переходов, @keyframes для сложных анимаций, transform для трансформаций, свойства animation-duration, timing-function, will-change.

CSS позиционирование — static, relative, absolute, fixed и sticky. Как работает position, контекст наложения, z-index и позиционирование относительно родителя.

Единицы измерения в CSS — абсолютные (px) и относительные (em, rem, vw, vh, %), функция clamp(), когда использовать rem а когда px, подходы к типографике.

Подключение шрифтов в CSS — @font-face, Google Fonts, системные шрифты, font-display для оптимизации загрузки, FOIT/FOUT и стеки шрифтов.

Псевдоклассы и псевдоэлементы в CSS — ::before/::after, :nth-child/:nth-of-type, :has(), :is(), :where(), :not(), ::placeholder, ::selection и практические примеры.

Работа с изображениями в CSS — object-fit для img/video, background-size и background-position, линейные и радиальные градиенты, conic-gradient.

CSS фильтры — filter и backdrop-filter для эффектов размытия, яркости, теней, насыщенности. Практические примеры: glassmorphism, hover-эффекты, обработка изображений.

Clip-path и CSS-маски — создание сложных форм обрезки, polygon, circle, ellipse, clip-path генератор, mask-image для декоративных эффектов.

Вложенные CSS-правила (Nesting) — нативная вложенность без Sass, синтаксис &, вложенные media queries, правила и сравнение с препроцессорами.

CSS @layer — каскадные слои для управления приоритетом стилей. Как @layer решает конфликты, порядок слоёв, @import layer и лучшие практики.

View Transitions API — анимации переходов между страницами и элементами, cross-document transitions, ::view-transition-old/new, snapshot и кастомизация переходов в CSS.

Scroll-driven animations в CSS — animation-timeline: scroll() и view(), анимации привязанные к прокрутке, progress bar, reveal-эффекты без JavaScript.

CSS для печати — @media print, разрывы страниц (break-before, break-after, break-inside), @page, скрытие элементов, вывод URL ссылок и подготовка страницы к печати.

CSS счётчики — автоматическая нумерация элементов через counter-reset, counter-increment, counter() и counters(). Нумерованные списки, заголовки, разделы и вложенные счётчики.

Tailwind CSS — фреймворк с подходом utility-first. Основные классы Tailwind, responsive-префиксы, модификаторы состояний, кастомизация, @apply и сравнение с обычным CSS.