Почему не работает CSS — 3 причины, с которых начать (и хард-рефреш решает половину)

Знакомо: меняешь стиль, сохраняешь, обновляешь страницу — а всё как было. Первая мысль: «CSS сломан». Но вот что успокаивает: в 9 случаях из 10 CSS в порядке. Браузер показывает старую версию из кэша, или твоё правило втихую перебивает другое. Разберём тройку причин, с самой частой — и почти наверняка почини́шься уже на первой.

Причина 1: браузер показывает старый CSS (кэш)

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

Как проверить: сделай жёсткое обновление — Ctrl+Shift+R (на Mac Cmd+Shift+R). Стиль применился? Значит, дело было в кэше, а код был верным с самого начала.

Как починить: приучись обновлять жёстко, когда правишь стили. Ещё надёжнее — открой DevTools (F12), вкладка Network, галочка «Disable cache»: пока панель открыта, браузер всегда берёт свежее. Стили «не докатываются» локально? Загляни в почему не открывается localhost — иногда сервер сам отдаёт старьё.

Причина 2: другое правило перебивает твоё (специфичность)

Твой CSS работает — просто проигрывает. Два правила спорят за один элемент, и побеждает не последнее, а более «сильное» (специфичное). Селектор по id бьёт селектор по классу, а !important и инлайн-стиль в style="..." бьют почти всё.

Как проверить: правый клик по элементу → «Просмотреть код». В панели стилей ты увидишь СВОЁ правило — но зачёркнутым. Зачёркнуто = его перебили. Рядом видно, кто победил.

Как починить: сделай свой селектор конкретнее (добавь родителя или класс) или убери конфликтующее правило. !important — крайняя мера: залепишь им всё — потом сам не разгребёшь. Целься в причину, а не глуши симптом.

Причина 3: браузер вообще не видит твой стиль

Стиль не перебит — он просто не долетел. Частые варианты:

• Файл не подключён. В HTML нет <link> на стили, или путь неверный. Открой DevTools → Network: если рядом с style.css красный 404 — страница не нашла файл, путь битый.
• Опечатка в имени класса. В HTML class="card", в CSS .crad — не совпало, стиль ни к чему не привязался. Сверь по буквам.
• Селектор метит мимо. Пишешь правило для класса .btn, а нужный элемент этого класса не имеет — правило есть, но цепляется не туда.

Как проверить: в инспекторе выбери элемент. Твоего правила нет в списке вообще (не зачёркнуто, а отсутствует)? Значит, браузер его не связал — ищи опечатку, путь или подключение.

Как починить: пройди по цепочке — файл подключён → путь верный (нет 404?) → имя класса совпадает буква в букву → селектор метит в нужный элемент.

Порядок действий

Чтобы не гадать, всегда иди сверху вниз:

1. Ctrl+Shift+R — сними кэш (причина 1).
2. Инспектор: правило зачёркнуто? — специфичность (причина 2).
3. Правила нет вовсе? — подключение, путь, опечатка (причина 3).

Три шага ловят почти любой «CSS не работает». Кстати, если верстаешь адаптив и стиль срабатывает везде, кроме телефона, — это часто отдельная история про медиа-запросы; загляни в как сделать сайт адаптивным.

Вопрос: почему работает в одном браузере, но не в другом?

Обычно снова кэш (в «проблемном» браузере лежит старьё — сделай хард-рефреш) или свойство, которое старый браузер не понимает. Проверь на свежей версии и в приватном окне — там кэша нет.

Вопрос: помогает ли !important, если ничего не берётся?

Он часто «чинит» на минуту, а потом ломает всё вокруг: перебить его дальше почти нечем. Сначала разберись, кто перебивает (причина 2), и целься точнее. !important оставь на самый крайний случай.

Вопрос: в приватном окне стиль применился — почему?

Потому что в приватном окне нет твоего кэша — грузится свежий CSS. Это прямая улика: код верный, а в обычном окне тебе показывали старую версию. Хард-рефреш решит.