Какие способы применения стилей напрямую без подключения существуют

Что проверяют

Знаете ли вы, как стиль попадает на элемент без внешнего файла через <link>, и чем эти способы отличаются по каскаду, производительности и безопасности. Следом часто спрашивают, почему в инлайн-стиле не работает :hover и как это обойти.

Как отвечать

• атрибут style: объявления прямо на элементе. В каскаде он сильнее любого селектора, перебить его из таблицы стилей можно только !important. Псевдоклассы, псевдоэлементы и медиазапросы в нём невозможны. В React это объект с camelCase-ключами: style={{ fontSize: 16 }};
• тег <style>: правила внутри документа. Так встраивают критический CSS первого экрана, чтобы не ждать блокирующей загрузки файла;
• CSSOM из JavaScript: el.style.color = "red", el.style.setProperty("--accent", color), el.style.cssText. Для целых правил есть sheet.insertRule();
• конструируемые таблицы: new CSSStyleSheet(), replaceSync() и document.adoptedStyleSheets или shadowRoot.adoptedStyleSheets. Одну таблицу можно разделить между многими веб-компонентами без дублирования;
• CSS-переменные: не отдельный способ, а лучший мост между JS и CSS. Скрипт меняет одну переменную, а правила с :hover и медиазапросами остаются в CSS.

Отдельно упомяните CSP: политика style-src без 'unsafe-inline' блокирует теги <style> и атрибуты style в разметке и через setAttribute, но не присваивание через el.style. Для разрешённых инлайн-блоков используют nonce или хэш.

Где спотыкаются

Пытаются написать :hover или @media в атрибуте style. Не выйдет: инлайн-стиль относится к одному элементу и не знает состояний. Решение в CSS-переменной, которую читает правило в таблице.

Меняют стили в цикле и тут же читают offsetHeight или getBoundingClientRect(). Каждое такое чтение заставляет браузер пересчитать раскладку, отсюда layout thrashing. Лучше переключить класс или сгруппировать чтения отдельно от записей.

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