✂️ Состояние элемента в атрибуте вместо трёх классов

classList.add('loading'), потом add('error'), где-то забыли снять — и на элементе одновременно висят loading и completed. Какой стиль победит, решает порядок правил в файле. Вместо трёх классов держи состояние в одном data-атрибуте:

<div class="order" data-state="loading">…</div>

order.dataset.state = 'completed';

.order[data-state="loading"]   { opacity: 0.5; }
.order[data-state="error"]     { border-color: red; }
.order[data-state="completed"] { border-color: green; }

У атрибута всегда одно значение: новое вытесняет старое, двух состояний сразу не бывает. Из JS оно меняется одной строкой через dataset.state, а CSS цепляется за него селектором [data-state="…"].

На гифке: клик по вкладке пишет новое значение в атрибут, и карточка заказа перекрашивается сама.

Селектор сравнивает значение целиком. Если в атрибут попадёт «loading completed», не сработает ни одно правило — поломку видно сразу.

❤️ — если было полезно

@glo_academy | #snippets