Что такое !important в CSS?

`!important` — флаг у объявления CSS, который поднимает его приоритет выше обычных правил, включая инлайн-стили.

.hidden { display: none !important; }

Как работает

• Важные объявления сравниваются отдельно от обычных и побеждают их, независимо от специфичности.
• Если !important у нескольких правил, снова сравнивают слой, специфичность и порядок.
• Порядок источников для важных стилей инвертирован: важные стили пользователя и браузера сильнее важных стилей автора, а в каскадных слоях ранний слой сильнее позднего.

Почему его избегают

• Перебить можно только другим !important — начинается «война важностей».
• Каскад становится непредсказуемым, отладка сложнее.

Когда уместен

• утилиты, которые должны работать всегда: .visually-hidden, .hidden;
• переопределение инлайн-стилей из сторонней библиотеки;
• пользовательские стили доступности.

Коротко для собеседования

!important делает объявление важнее обычных правил и инлайн-стилей; использовать стоит только в утилитах и для переопределения чужих стилей, иначе каскад ломается.

Подробнее: MDN — !important