CSS — итоги
Кратко — что стоит унести из раздела "CSS". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные сбои и ситуации после раздела про стили. Здесь — что проверить и в какой главе копать; формулировки для зачёта — в чек-листе. Ниже — блок в духе поисковых запросов про SEO, скорость и мобильную выдачу (краткий ответ + ссылка в раздел).
Вопрос. Правило в .css есть, в DevTools оно видно, а на странице элемент "как был".
Ответ. Откройте вкладку Computed и посмотрите, какое правило победило в каскаде — чаще перебивают более специфичный селектор, inline-стиль или !important. Упростите селектор или поднимите слой через @layer. Подробнее здесь — каскад и блочная модель, слои @layer.
Вопрос. Добавил !important везде — теперь ничего нельзя переопределить даже в компоненте.
Ответ. !important — крайняя мера; война важности заканчивается ещё более жёстким правилом. Уберите лишние !important, снизьте специфичность (класс вместо #id), разнесите темы через переменные. Подробнее здесь — каскад.
Вопрос. Блок width: 100% + padding — появилась горизонтальная полоса прокрутки.
Ответ. При box-sizing: content-box padding и border добавляются к ширине. На макете обычно ставят box-sizing: border-box глобально или на контейнеры. Подробнее здесь — блочная модель.
Вопрос. Между блоками "провал" — margin есть, а визуально зазор другой, чем в инспекторе.
Ответ. Схлопывание вертикальных margin соседних блоков даёт один общий зазор вместо суммы. Решения — padding у родителя, display: flow-root, flex/grid у контейнера. Подробнее здесь — блочная модель.
Вопрос. Flex-элемент не сжимается и вылезает за экран с длинным словом.
Ответ. У flex-элемента по умолчанию min-width: auto — задайте min-width: 0 или overflow-wrap: anywhere на тексте, проверьте flex-shrink. Подробнее здесь — Flexbox и Grid.
Вопрос. justify-content: center в Flex, а элементы всё равно прижаты к левому краю.
Ответ. Родитель должен быть flex-контейнером (display: flex), а лишняя ширина — у контейнера, иначе центрировать нечего. Проверьте, что стиль не перебит и что вы смотрите на тот DOM-узел. Подробнее здесь — Flexbox и Grid.
Вопрос. Grid: ячейки наезжают друг на друга или пустые дыры в сетке.
Ответ. Сверьте grid-template-columns/rows, gap, имена линий и grid-area. Элемент с position: absolute внутри ячейки выходит из потока сетки. Подробнее здесь — Flexbox и Grid, логические свойства и subgrid.
Вопрос. position: absolute — блок улетел в угол страницы, а не в карточку.
Ответ. Абсолют позиционируется относительно ближайшего предка с position не static (часто relative на карточке). Без такого предка — относительно viewport. Подробнее здесь — основные стили.
Вопрос. Поставил z-index: 9999, а выпадающее меню всё равно под соседним блоком.
Ответ. Решает контекст наложения, а не самое большое число: у родителя с transform, opacity меньше 1 или filter свой изолированный стек. Поднимите меню в тот же контекст или уберите лишний transform у предка. Подробнее здесь — основные стили.
Вопрос. :hover на телефоне "залипает" после тапа по кнопке.
Ответ. На touch-устройствах псевдокласс hover может оставаться до следующего касания. Для основного действия опирайтесь на :active и реальный :focus-visible, не делайте hover единственным способом показать меню. Подробнее здесь — псевдоклассы, рекомендации.
Вопрос. Убрал обводку outline: none у кнопок — заказчик доволен, а табом по сайту ничего не видно.
Ответ. Вместо полного снятия outline задайте заметный :focus-visible (контрастная рамка или box-shadow). Это требование доступности для клавиатуры. Подробнее здесь — доступность в CSS.
Вопрос. rem на корне 10px, а текст в компоненте вдруг огромный.
Ответ. rem считается от font-size на html; вложенный em умножается на размер родителя и накапливается. Для типографики чаще держат rem, для локальных отступов внутри компонента — em. Подробнее здесь — основные стили.
Вопрос. height: 100vh на мобильном — блок то обрезается, то прыгает при прокрутке.
Ответ. Классический vh включает панели браузера. Используйте dvh/svh там, где поддержка есть, или min-height с запасом; см. сводку по viewport в рекомендациях. Подробнее здесь — адаптивный дизайн, практические рекомендации.
Вопрос. Медиазапрос @media (max-width: 768px) не срабатывает на планшете.
Ответ. Проверьте единицы (px vs em), meta viewport в HTML, не перепутан ли max и min. В DevTools включите эмуляцию устройства и смотрите ширину viewport, а не окна монитора. Подробнее здесь — адаптивный дизайн.
Вопрос. Тёмная тема мигает белым при загрузке страницы.
Ответ. Стили темы подключились поздно HTML. Задайте цвет фона и текста рано (критический CSS, переменные на :root, color-scheme на html). Подробнее здесь — переменные в CSS, доступность.
Вопрос. Анимация @keyframes дёргается на слабом телефоне.
Ответ. Анимируйте transform и opacity — они чаще идут на композиторе; ширину, height и box-shadow на больших блоках — осторожно. Учитывайте prefers-reduced-motion. Подробнее здесь — анимации, доступность. Готовый код с разбором — CSS-анимации — готовые эффекты.
Вопрос. transition: all — после ховера страница "тормозит".
Ответ. all подписывает переход на каждое свойство, включая дорогие. Перечисляйте только нужные: color, transform, opacity. Подробнее здесь — анимации, hover-кнопка с разбором.
Вопрос. Учебник советует вёрстку на float — колонки съехали.
Ответ. Float выводит элемент из нормального потока; без clearfix колонки наезжают. Для макета страницы сегодня берут Flexbox или Grid, float — для обтекания текстом вокруг картинки. Подробнее здесь — основные стили, Flexbox и Grid.
Вопрос. Селектор .card .title не работает, хотя в HTML класс card__title по BEM.
Ответ. В BEM в CSS указывают один класс .card__title, совпадающий с разметкой. Селектор .card .title ищет элемент с классом title внутри .card — это другая запись. Сверьте имена посимвольно. Примеры блок, элемент, модификатор — в подключении и методологиях; точка и пробел в селекторах — §4.
Вопрос. Стили из Vue/Svelte "не видят" глобальный класс на body.
Ответ. Scoped-стили ограничены компонентом; глобальные правила выносят в отдельный файл или :global(...). Проверьте порядок подключения и каскад. Подробнее здесь — подключение CSS.
Вопрос. Подключил CSS через @import в начале файла — сайт грузится дольше.
Ответ. @import создаёт цепочку запросов (сначала главный файл, потом импорты). В продакшене лучше несколько <link> или один собранный бандл. Подробнее здесь — подключение CSS.
Вопрос. После деплоя пользователи видят старые цвета — я же обновил styles.css.
Ответ. Браузер и CDN кэшируют CSS. Добавьте версию в URL (styles.css?v=2 или хеш в имени файла сборки) и проверьте заголовки Cache-Control. Подробнее здесь — подключение CSS.
Вопрос. var(--color) не подставляется — в Computed пусто.
Ответ. Переменная должна быть объявлена на том же элементе или предке (:root), имя с двумя дефисами --. Опечатка в имени даёт fallback или невалидное значение. Подробнее здесь — переменные.
Вопрос. calc(100% - 20px) внезапно игнорируется.
Ответ. В calc() обязательны пробелы вокруг + и -; единицы должны быть совместимы. Для адаптивных размеров смотрите clamp() и min(). Подробнее здесь — функции в CSS.
Вопрос. :has(.error) не работает в старом Safari — форма без подсветки.
Ответ. :has() — относительно новый селектор; закладывайте запасной стиль (класс на родителе из JS или соседний селектор). Проверьте caniuse и политику поддержки проекта. Подробнее здесь — селекторы :is, :where, :has.
Вопрос. Выпадающий список обрезается внутри карточки с overflow: hidden.
Ответ. overflow: hidden режет всё, что выходит за padding-box. Решения — портал меню в body, другой контейнер, overflow: visible на нужной оси или позиционирование поверх. Подробнее здесь — типовые элементы UI.
Вопрос. position: sticky заголовок не прилипает при прокрутке.
Ответ. У любого предка не должно быть overflow: hidden/auto, мешающего sticky; нужна высота прокручиваемой области и указанный top. Подробнее здесь — основные стили.
Вопрос. Контраст текста #aaa на #fff — заказчик говорит "нормально", а в аудите fail.
Ответ. WCAG задаёт минимальные коэффициенты контраста для текста и UI; проверяйте инструментом (DevTools, contrast checker). Подробнее здесь — доступность, рекомендации.
Вопрос. Пользователь в системе включил "уменьшить движение", а баннер всё ещё крутится.
Ответ. Оберните анимации в @media (prefers-reduced-motion: reduce) и отключите или упростите движение. Подробнее здесь — доступность, каркас с reduce в лаборатории.
Вопрос. Высокий контраст Windows — мои градиенты и тени исчезли.
Ответ. Режим forced-colors подменяет палитру системой. Проверьте читаемость границ и фокуса без опоры только на цвет. Подробнее здесь — доступность.
Вопрос. Вставил чужой CSS с CDN в админку — сломалась вся панель.
Ответ. Глобальные селекторы (*, body, a) и сбросы Bootstrap перебивают чужой интерфейс. Подключайте стили в изоляции (iframe, shadow DOM, префикс класса-обёртки) и доверяйте только проверенным источникам. Подробнее здесь — инъекция стилей.
Вопрос. ::before с иконкой не показывается — content пустой.
Ответ. У псевдоэлемента обязательно свойство content (хотя бы пустая строка "" для декора). Проверьте display, размеры и что родитель видим. Подробнее здесь — псевдоклассы и псевдоэлементы.
Вопрос. Шрифт из Google Fonts загрузился поздно — текст скачет (CLS).
Ответ. Используйте font-display: swap или локальный fallback близкий по метрикам, подключайте preload для критичного начертания. Подробнее здесь — основные стили, рекомендации.
Вопрос. RTL-страница — отступы "слева" остались слева при арабском тексте.
Ответ. Переходите на логические свойства (margin-inline-start, padding-inline) вместо жёстких left/right. Подробнее здесь — логические свойства.
Вопрос. В учебном проекте один огромный style.css на 2000 строк — как не утонуть?
Ответ. Разбейте по слоям (база, компоненты, утилиты), именуйте по BEM или ITCSS, ведите дизайн-токены в переменных. Сводка "что использовать / чего избегать" — в практических рекомендациях. Подробнее здесь — подключение и методологии (BEM, CSS Modules), рекомендации, практика.
Вопрос. Адаптивная вёрстка обязательна для SEO в Google?
Ответ. Индексация ориентирована на mobile-first: страница должна нормально читаться и нажиматься на телефоне. База — viewport в HTML и адаптивные стили (%, rem, медиазапросы). Подробнее здесь — адаптивный дизайн, рекомендации, HTML, viewport.
Вопрос. PageSpeed Insights ругается на CLS — как исправить CSS?
Ответ. CLS (Cumulative Layout Shift) растёт, когда блоки прыгают после загрузки шрифтов, баннеров или картинок без размеров. Задайте width/height или aspect-ratio, резервируйте место под рекламу, используйте font-display: swap с похожим fallback. Подробнее здесь — рекомендации, основные стили.
Вопрос. LCP плохой — какие CSS-свойства чаще всего виноваты?
Ответ. Largest Contentful Paint страдает от тяжёлого hero, блокирующих стилей/шрифтов и поздней отрисовки текста. Упростите критический путь: меньше тяжёлых теней и фильтров на первом экране, быстрые шрифты, размеры у главного изображения в HTML. Подробнее здесь — рекомендации, подключение CSS.
Вопрос. Скрыть текст через display none — Google посчитает это cloaking?
Ответ. display: none для важного контента, который виден только роботу или только людям, — рискованная практика. Нормально скрывать декор, мобильное меню до открытия, вкладки с корректной доступностью. Подробнее здесь — рекомендации, доступность.
Вопрос. visibility hidden и opacity 0 — индексируется ли скрытый текст?
Ответ. Текст в DOM может учитываться поиском; злоупотребление невидимыми блоками с ключевиками — спам. Для аккордеонов и табов держите контент в разметке честно, без "простынь" ключевых слов. Подробнее здесь — основные стили, HTML, семантика.
Вопрос. Минифицировать CSS обязательно для продвижения сайта?
Ответ. Минификация и сжатие (gzip/brotli) уменьшают время загрузки — фактор UX и Core Web Vitals, не прямой "балл SEO". Собирайте один прод-бандл вместо десятка мелких файлов без нужды. Подробнее здесь — подключение CSS, рекомендации.
Вопрос. Что такое critical CSS и зачем он для скорости страницы?
Ответ. Critical CSS — стили первого экрана, встроенные или подключённые раньше остального, чтобы быстрее появился контент. Остальное — асинхронно или отложенно. Подробнее здесь — подключение CSS, рекомендации.
Вопрос. Render-blocking CSS — как не блокировать отрисовку?
Ответ. Каждый <link rel="stylesheet"> в head без media блокирует рендер. Разделите критичное/некритичное, используйте media, отложенную загрузку некритичных стилей по гайдам сборщика. Подробнее здесь — подключение CSS.
Вопрос. Mobile-first или desktop-first — что лучше для SEO?
Ответ. Mobile-first — базовые стили для узкого экрана, @media (min-width: …) добавляют улучшения для широких. Так проще не забыть мобильную версию, которую оценивает поиск. Подробнее здесь — адаптивный дизайн, подключение CSS.
Вопрос. Google Mobile-Friendly Test — мелкий шрифт, что поставить в CSS?
Ответ. Базовый текст обычно от 16px (или 1rem), межстрочный интервал ~1.4–1.6, без горизонтального скролла body. Не отключайте зум через user-scalable=no без веской причины. Подробнее здесь — рекомендации, основные стили.
Вопрос. Кнопки и ссылки слишком мелкие на телефоне — есть норма для SEO?
Ответ. Ориентир touch target — около 44–48px по меньшей стороне, достаточные отступы между кликабельными элементами. Это UX и мобильные сигналы качества. Подробнее здесь — рекомендации, типовые элементы UI.
Вопрос. order в Flexbox — можно ли менять порядок блоков для SEO?
Ответ. Визуальный order не меняет DOM: робот и скринридер читают исходный порядок в HTML. Главный контент держите выше в разметке, визуальные перестановки — только при сохранении логики. Подробнее здесь — Flexbox и Grid.
Вопрос. Grid layout: сайдбар визуально слева, а в коде ниже main — это нормально для поиска?
Ответ. Да, если в HTML main идёт раньше второстепенных блоков, а Grid только меняет колонки. Так сохраняются SEO и доступность без "ломания" потока float. Подробнее здесь — Flexbox и Grid.
Вопрос. Тёмная тема через CSS — влияет ли на ранжирование?
Ответ. Сама тема не ранжирует; важны читаемость, контраст и prefers-color-scheme без мигания при загрузке. color-scheme на html помогает нативным контролам. Подробнее здесь — переменные, доступность.
Вопрос. Контраст текста и фона — это только WCAG или ещё и SEO?
Ответ. Прямого "балла за контраст" нет, но плохая читаемость повышает отказы и портит поведенческие сигналы. Проверяйте пары цветов по WCAG, особенно на мобильных. Подробнее здесь — доступность, рекомендации.
Вопрос. Анимации CSS тормозят сайт в PageSpeed — что отключить?
Ответ. Тяжёлые @keyframes на больших областях, box-shadow и blur грузят GPU. Для UX оставьте лёгкие transform/opacity, на слабых устройствах учитывайте prefers-reduced-motion. Подробнее здесь — анимации, рекомендации, готовые эффекты.
Вопрос. @import в CSS замедляет сайт — правда для Google?
Ответ. Цепочка @import откладывает применение стилей и ухудшает метрики загрузки. В продакшене лучше один или несколько <link> без вложенных импортов. Подробнее здесь — подключение CSS.
Вопрос. Изображение width 100% без height — почему проседает SEO-скорость?
Ответ. Без зарезервированного места картинка после загрузки сдвигает текст (CLS). Задайте aspect-ratio в CSS или атрибуты размеров в HTML. Подробнее здесь — блочная модель, HTML, img.
Вопрос. content в ::before с ключевыми словами — индексируется?
Ответ. Текст из content в псевдоэлементах слабо или не учитывается как основной контент; ключевики только в CSS — плохая стратегия. Важные фразы — в HTML. Подробнее здесь — псевдоэлементы, основные теги HTML.
Вопрос. Отдельная мобильная версия m.example.com — что учесть в CSS и SEO?
Ответ. Сейчас чаще один адаптивный URL; дубли m-dot требуют согласованных метаданных и редиректов. Если m-dot остаётся — одинаковый контент и link rel="alternate" / canonical. Подробнее здесь — адаптивный дизайн, HTML, метатеги.
Вопрос. max-width на контейнере статьи — помогает читать длинный текст и SEO?
Ответ. Узкая колонка (ориентир ~60–75 символов в строке) снижает усталость, время на странице растёт — косвенный плюс. max-width + отступы через rem/ch. Подробнее здесь — основные стили, рекомендации.
Вопрос. preload для шрифта в CSS — как связано с Core Web Vitals?
Ответ. <link rel="preload"> для критичного начертания ускоряет текст (LCP), в CSS задайте font-display: swap и метрически близкий fallback. Не preload всю семейство из 12 начертаний. Подробнее здесь — подключение CSS, рекомендации.
Вопрос. Инлайн-стили style="" на каждом теге — вредит ли продвижению?
Ответ. SEO напрямую не страдает, но раздувается HTML, сложнее кэшировать CSS и поддерживать единый дизайн. Для продакшена — классы и внешние таблицы стилей. Подробнее здесь — подключение CSS, синтаксис.
Вопрос. print CSS @media print — нужен ли для индексации?
Ответ. Для Google почти не влияет; полезен пользователям и PDF. Не прячьте в @media print контент, который виден только при печати, ради манипуляций. Подробнее здесь — адаптивный дизайн.
Что запомнить
Основные категории стилей:
- Селекторы (классы, ID, атрибуты);
- Макеты (Flexbox, Grid);
- Адаптивность (медиа-запросы);
- Анимации и эффекты.
Селекторы:
- Базовые (элемент, класс, ID);
- Атрибутные (
[attribute="value"]); - Псевдоклассы (
:hover,:nth-child); - Псевдоэлементы (
::before,::after).
Макеты:
- Flexbox для одномерных раскладок;
- Grid для двумерных раскладок;
- Позиционирование (relative, absolute, fixed);
- Отображение (
display — block, inline, flex).
Три основных правила написания CSS:
- Используйте методологию организации (BEM, OOCSS).
- Соблюдайте принцип DRY (Don't Repeat Yourself).
- Тестируйте на разных устройствах и разрешениях.
Три фундаментальных момента:
- Каскадность определяет приоритет стилей;
- Специфичность влияет на применение правил;
- Производительность зависит от оптимизации кода.
CSS — это язык описания стилей, предназначенный для управления внешним видом и компоновкой HTML-документов. Его основная задача — отделить представление от содержимого, что позволяет гибко управлять визуальной составляющей без изменения структуры данных. Эта декларативная природа делает CSS мощным, но одновременно требует понимания его специфических механизмов — каскадности, наследования, специфичности селекторов и модели блока.
Современный CSS — это зрелая технология, включающая не только базовые правила оформления (цвет, шрифт, отступы), но и сложные системы компоновки: Flexbox для одномерных макетов и Grid для двумерных. Эти инструменты позволяют создавать адаптивные, гибкие и семантически чистые интерфейсы без использования устаревших хаков вроде float или таблиц. Адаптивность достигается через медиавыражения (@media), которые позволяют применять разные стили в зависимости от характеристик устройства — ширины экрана, ориентации, разрешения и даже предпочтений пользователя (например, темной темы).
CSS поддерживает динамическое поведение — псевдоклассы (:hover, :focus, :nth-child) реагируют на состояние элемента, а анимации и переходы (transition, @keyframes) добавляют плавность и интерактивность без JavaScript. Готовые примеры с разбором — CSS-анимации — готовые эффекты. Это особенно важно для доступности и производительности: многие эффекты можно реализовать средствами браузера, не нагружая основной поток.
Ключевой принцип эффективной работы с CSS — модульность и предсказуемость. Глобальная область видимости по умолчанию приводит к конфликтам, поэтому используются методологии (BEM, SMACSS, ITCSS) и современные подходы — CSS-модули, scoped-стили во фреймворках (Vue, Svelte) и CSS-in-JS. Также широко применяются кастомные свойства (CSS-переменные), которые позволяют централизованно управлять цветами, отступами, шрифтами и легко переключать темы.
Наконец, CSS — это фундаментальный слой пользовательского опыта. Правильно написанный CSS обеспечивает:
- доступность (контраст, масштабируемость, поддержка скринридеров),
- производительность (минимизация repaint/reflow, использование
transformиopacityдля анимаций), - поддерживаемость (чистая архитектура, документирование токенов дизайна),
- кроссбраузерность (понимание особенностей движков, graceful degradation).
Освоение CSS — это освоение языка, на котором говорят миллиарды пользователей каждый день. Он остаётся незаменимым навыком для любого, кто работает с вебом.
Куда идти дальше
Полный маршрут — на странице о разделе.
Сводка по свойствам и практикам (десктоп и мобильные): Практические рекомендации по CSS.
| Тема | Раздел |
|---|---|
| "JavaScript — о разделе" | "JavaScript — о разделе" |
| "PHP — о разделе" | "PHP — о разделе" |
| "HTML — о разделе" | "HTML — о разделе" |
| "ASP.NET - веб-платформа Microsoft" | "ASP.NET - веб-платформа Microsoft" |
| HTML — целые страницы (теги) | HTML-страницы целиком |
| Готовые макеты HTML+CSS | HTML + CSS — готовые макеты |
| CSS-анимации (fade, spinner, shimmer) | CSS-анимации — готовые эффекты |
Проверьте себя: Чек-лист самопроверки.