Как лучше реализовать disabled состояние кнопки: через CSS или JavaScript и почему?

Неактивную кнопку делают атрибутом `disabled` в HTML (через JavaScript или фреймворк), а CSS только оформляет это состояние.

Почему не только CSS

.button.disabled { opacity: .5; pointer-events: none; }

Так кнопка лишь выглядит неактивной: на неё можно перейти Tab и нажать Enter, а скринридер не сообщит, что она недоступна.

Правильно

<button disabled={!isValid}>Отправить</button>

.button:disabled { opacity: .5; cursor: not-allowed; }

Атрибут disabled убирает кнопку из фокуса, блокирует клики и отправку формы и сообщается вспомогательным технологиям.

Когда нужен aria-disabled

Если кнопка должна оставаться в фокусе (например, чтобы показать подсказку, почему её нельзя нажать), используют aria-disabled="true" и сами блокируют действие в обработчике.

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

Состояние задают атрибутом disabled (логика — в JS), а CSS оформляет через :disabled; только CSS не блокирует клавиатуру и не виден скринридерам.

Подробнее: MDN — Атрибут disabled