CSS простыми словами: как стили влияют на вид, скорость и позиции сайта

Что такое CSS и зачем он нужен сайту?

CSS расшифровывается как Cascading Style Sheets, то есть каскадные таблицы стилей. Это формальный язык, который описывает внешний вид документа, написанного на языке разметки, как поясняет Википедия. Проще говоря, CSS отвечает на вопрос «как это выглядит», а текст страницы остаётся делом HTML.

Страница делится на три слоя. По описанию Хекслета, HTML задаёт структуру страницы, как чертёж, CSS отвечает за визуальную часть, а JavaScript за интерактивные элементы. Уберите CSS, и посетитель увидит голый текст с синими ссылками: кнопки, колонки и фирменные цвета исчезнут.

Раньше вёрстку делали таблицами HTML, и это было неудобно: по разбору Webref, изменение макета требовало изменения разметки. Файл стилей убрал эту зависимость. Оформление правят в одном месте, а содержимое страниц остаётся прежним. Для бизнеса это экономит часы разработки при каждом обновлении дизайна.

CSS встречается везде, где есть страница. Темы оформления на WordPress, шаблоны конструкторов и интернет-магазинов на коробочных движках опираются на файлы стилей. Поэтому раздел «дополнительный CSS» в админке часто решает мелкие задачи без программиста: поменять цвет кнопки, увеличить шрифт или убрать лишний отступ у заголовка.

Как CSS работает в браузере

Когда посетитель открывает страницу, браузер сначала преобразует HTML в DOM и только потом загружает CSS, описывает MDN. Дальше он сопоставляет правила с элементами и рисует картинку. Сам путь запроса от браузера до сервера разобран в материале про то, как устроен интернет.

В том же материале MDN сказано, что браузер пропускает свойство, которое не понимает, и идёт дальше. Поэтому опечатка не ломает страницу целиком, а молча лишает элемент нужного оформления. Если на странице «не сработал» цвет или отступ, начните с проверки написания свойства и имени класса.

Подключить стили можно тремя способами, и выбор влияет на то, насколько удобно сайтом потом управлять.

Из трёх способов Webref называет предпочтительным отдельный файл, а Хекслет добавляет, что файл стилей сохраняется в кэше браузера, и повторные визиты загружаются быстрее. Наглядный пример разделения стилей и содержимого есть в том же материале Webref: в проекте CSS Zen Garden каждый дизайн использует один и тот же HTML, а CSS каждый раз другой. Одна разметка выглядит как набор совершенно разных страниц.

Посмотреть, какие правила применились к элементу, можно без разработчика: в браузере Chrome откройте инструменты разработчика, выберите элемент и прочитайте список стилей справа. Там видно, какое правило победило, какие вычеркнуты и из какого файла пришло оформление. Это быстрый способ понять, почему кнопка выглядит не так, как задумано.

Из чего состоит правило CSS и как работает каскад?

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

• Тег: оформляет все элементы одного типа, скажем, все абзацы.
• Класс (с точкой): оформляет элементы с одинаковым классом, их может быть много.
• Идентификатор (с решёткой): оформляет один уникальный элемент.
• Универсальный (звёздочка): применяется ко всем элементам, его используют для сброса стилей.
• Атрибут: выбирает элементы по атрибуту, например изображения с заполненным описанием.
• Псевдокласс: оформляет состояние элемента, например ссылку при наведении курсора.

Слово «каскад» отвечает на вопрос, что делать, когда два правила спорят. Побеждает более конкретное правило, а при равной конкретности то, что записано ниже. Инлайн-стили, как отмечает Хекслет в том же материале, имеют максимальный приоритет. Пометку important лучше беречь для крайних случаев: чем больше таких исключений, тем труднее потом править оформление.

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

Мелочи расчёта тоже бывают дорогими, и в истории CSS есть показательный случай. По статье Википедии, стандарт W3C считает свойство width шириной содержимого блока без отступов и рамок, а Internet Explorer 4 и 5 включали отступы и рамки в эту ширину. Один и тот же блок в двух браузерах получался разного размера, и вёрстку приходилось чинить отдельно под каждый. Итогом стало свойство box-sizing, которое позволило выбрать модель расчёта явно.

Что умеет современный CSS: адаптивность и сетка

Возможность задать свой стиль для каждого устройства появилась в CSS2: в том же материале Хекслета сказано, что внешний вид сайта стал подстраиваться под размер монитора посетителя. Сегодня на этом держится адаптивная вёрстка, когда одна страница одинаково удобна на компьютере и на телефоне.

Для поиска это не формальность. Справка Яндекса описывает адаптивный сайт как страницу, которая подстраивается под разрешение и размер экрана и доступна по одному URL для всех типов устройств. Такой вариант не требует отдельного мобильного поддомена и дублирования страниц.

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

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

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

Как CSS влияет на скорость загрузки и позиции в поиске

Пока браузер не получил стили, страница не может показать нормальный вид. Поэтому раздутый файл стилей отодвигает показатель LCP, то есть время появления главного блока. Для ускорения web.dev советует три шага: удалить неиспользуемые правила CSS, отложить загрузку некритичных стилей и минимизировать CSS при передаче.

В том же руководстве есть предупреждение для картинок в стилях: если ресурс LCP упоминается только во внешнем CSS, его нужно предзагружать с высоким приоритетом выборки. Иначе браузер узнает о картинке поздно, и главный блок появится с задержкой.

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

Цену скорости показал A/B-тест Vodafone: половина трафика шла на оптимизированную страницу, половина на базовую. По данным web.dev, улучшение LCP на 31% привело к росту продаж на 8%. Команда перенесла рендеринг виджета на сервер и сократила блокирующий JavaScript. Это не чистый CSS-кейс, но он показывает, сколько стоит каждая сотня миллисекунд.

Ускорение без большого бюджета: опыт Самолёт 10D

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

Показательна история компании Самолёт 10D. Игорь Савичев рассказывает на Хабре, что команда не стала перестраивать инфраструктуру и начала с замера в Lighthouse. За 16 часов разработки бандл main.js уменьшили с 16 мегабайт до 5,5 килобайта, LCP снизили с 3,5 до 1,5 секунды, а индекс удовлетворённости пользователей сервиса вырос с 6,9 до 8.

Получить 80% результата за 20% усилий.

Игорь Савичев, Самолёт 10D, цель проекта в том же материале на Хабре

Для владельца сайта вывод простой: сначала снимите лишний вес со стилей и скриптов, а уже потом меняйте хостинг.

Разница видна и по промежуточным замерам из того же материала. Пока main.js весил 16 мегабайт, холодная загрузка занимала около 5 секунд, а после сокращения до 5,5 килобайта около 12 миллисекунд. Для посетителя с мобильным интернетом это разница между пустым экраном и страницей, которая открывается сразу.

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

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

Почему страница прыгает при загрузке?

Если во время загрузки текст внезапно уезжает вниз, это сдвиг макета. Web.dev объясняет, что его вызывают изображения и видео с неизвестными размерами и шрифты, которые меняют размер текста. Посетитель в этот момент рискует нажать на соседний элемент, и такую нестабильность поисковая система измеряет показателем CLS.

Целевой уровень CLS, по тому же материалу web.dev, не выше 0,1. Значение выше говорит о том, что элементы смещаются заметно. Чаще всего причина в стилях: у картинки нет заданных размеров, у баннера нет зарезервированного места, а подключаемый шрифт отличается от запасного.

Эффект на поведении показала команда Yahoo! JAPAN News. По данным web.dev, оптимизация CLS на 0,2 привела к росту просмотров страниц за сеанс на 15%. Команда зарезервировала место под изображение полями соотношения сторон, а число URL с низкой производительностью в Search Console снизилось на 98%.

Вывод для вашей страницы сводится к трём правкам:

• Задайте размеры всем изображениям и видео, чтобы браузер заранее знал высоту блока.
• Оставьте место под баннеры, формы и виджеты, которые подгружаются позже основного текста.
• Подберите запасной шрифт, близкий по размеру к основному, чтобы текст не менял высоту при замене.

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

Ошибки с CSS, которые мешают сайту чаще других

Первая ошибка: закрыть стили от роботов. Яндекс в той же справке просит разрешить в robots.txt сканирование CSS и JavaScript, от которых зависит отображение страниц на мобильных устройствах. Иначе страницы могут некорректно отображаться в результатах поиска.

Вторая ошибка касается переопределений. Когда оформление не удаётся поменять, в правило добавляют пометку important, потом ещё одну, и через полгода файл превращается в набор исключений. Лучше найти правило, которое побеждает, и поправить его, чем перебивать силой.

Ещё одна проверка из той же справки Яндекса: страницы должны отвечать кодом 200 OK, а ответ сервера можно посмотреть в Яндекс Вебмастере. Если стили лежат на отдельном адресе и он отвечает ошибкой, мобильная версия страницы может выглядеть сломанной, даже если у вас на компьютере всё в порядке.

Остальные ошибки обычно накапливаются годами и не заметны, пока не начнёшь измерять скорость. Короткий чек-лист, с которого можно начать:

1. Откройте robots.txt и убедитесь, что файлы стилей и скриптов не закрыты от Яндекса.
2. Проверьте, что стили подключены одним внешним файлом, а не продублированы в каждом блоке.
3. Найдите в Chrome DevTools неиспользуемые правила и удалите те, которыми страница точно не пользуется.
4. Задайте размеры изображениям и зарезервируйте место под баннеры, чтобы страница не прыгала.
5. Проверьте главную и карточку услуги на телефоне и сравните отчёт о скорости до и после правок.

Как поставить задачу разработчику, чтобы не получить переделку: приложите адрес страницы, снимок экрана с проблемой и устройство, на котором она видна. Назовите измеримую цель, например уложиться в целевой показатель LCP или убрать смещение блока при загрузке. После работы запросите повторный замер на тех же страницах, чтобы сравнение было честным.

Если часть данных, например выбор языка или тёмной темы, браузер хранит между визитами, не забудьте про cookie: стили при этом остаются прежними, но правила согласия могут потребовать отдельного блока на странице.

Частые вопросы