Что такое inline стили

Inline стиль находится прямо на элементе. В обычном HTML это атрибут style, внутри которого записаны CSS-декларации.

<p style="color: blue; font-weight: 700;">
  Текст будет синим и жирным.
</p>

Такой стиль применяется только к этому p. Если рядом будет второй абзац, он не получит эти правила автоматически. Поэтому inline стиль удобен для точечной правки, но плохо масштабируется, когда одинаковое оформление нужно повторить в десятках мест.

На интервью полезно сразу связать определение с каскадом. Обычный inline стиль имеет высокий приоритет и обычно перекрывает обычные правила из CSS-классов.

<p class="message" style="color: red;">Ошибка</p>

.message {
  color: blue;
}

В этом примере текст будет красным, потому что значение из style сильнее обычного правила класса. Но не стоит говорить, что inline невозможно перебить. Правило с !important может перебить обычный inline стиль. При этом строить код на такой борьбе почти всегда плохо.

Хороший короткий ответ может звучать так:

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

Эта формулировка лучше, чем просто "это стили внутри тега". Она показывает, что вы понимаете синтаксис, практическое применение и ограничения подхода.

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

Плохой вариант для повторяемого компонента:

<button
  style={{
    backgroundColor: isActive ? "#2563eb" : "#e5e7eb",
    color: isActive ? "#ffffff" : "#111827",
    padding: "8px 12px",
    borderRadius: 8,
  }}
>
  Сохранить
</button>

Почему это плохо: часть дизайна кнопки спрятана в JSX, состояния придется копировать, а hover и focus все равно не описать нормально. Более устойчивый вариант: вынести базовый вид в CSS, а динамическое значение передавать отдельно, если оно действительно нужно.

const accentColor = allowedAccentColors[userTheme] ?? "#2563eb";

<button className="button" style={{ "--accent-color": accentColor }}>
  Сохранить
</button>

.button {
  background: var(--accent-color);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
}

.button:hover {
  filter: brightness(0.95);
}

Так динамика остается рядом с данными, а поведение компонента остается в CSS. Если цвет приходит от пользователя или из API, не подставляйте его сырой строкой. Возьмите значение из whitelist или проверьте формат цвета. Иначе можно получить сломанную тему, нечитаемый текст или неожиданное CSS-значение.

В JavaScript можно менять inline стиль через DOM API:

const element = document.querySelector(".progress");
element.style.width = "60%";

Это нормально для простого примера, но в приложении важно не превращать DOM-обновления в хаотичные записи. Если вы часто меняете размеры и тут же читаете offsetWidth или getBoundingClientRect(), можно получить лишний layout, просадки FPS и дерганый интерфейс. Для частых обновлений группируйте чтение и запись, используйте requestAnimationFrame и по возможности анимируйте transform или opacity.

В React style принимает объект, а не CSS-строку.

<div style={{ color: "green", fontSize: 20 }}>
  Успешно сохранено
</div>

Свойства пишутся в camelCase: fontSize, backgroundColor, zIndex. Многие числовые значения React преобразует в пиксели, но не все свойства имеют единицы. Поэтому для процентов, rem и calc лучше писать строку: width: "50%", fontSize: "1rem".

Основной риск inline стилей не в том, что браузер их не понимает. Браузер понимает их отлично. Риск в поддержке: стиль становится привязан к одному месту, конфликтует с дизайн-системой и усложняет переопределение.

Еще один риск связан с безопасностью и политиками браузера. В проектах со строгой Content Security Policy inline styles могут быть запрещены или потребовать отдельной настройки. Поэтому в больших приложениях лучше заранее понимать, разрешен ли такой паттерн. Если стиль приходит из внешних данных, не собирайте строку вида <div style="..."> вручную. Валидируйте значение и передавайте его через безопасный API, например через React style object или CSS-переменную с whitelist.