Один класс для стилизации в JavaScript

Пусть у нас есть два класса, которые мы даем элементу в зависимости от его состояния:

cssdiv.active {
  color: red;
}
div.passive {
  color: black;
}

На самом деле наличие двух классов здесь может мешать. В этом случае мы можем переписать стили следующим образом через селектор :not:

cssdiv.active {
  color: red;
}
div:not(active) {
  color: black;
}

В этом случае мы сможем удобным образом тогглить наш класс, делая элемент активным или неактивным:

javascriptelem.classList.toggle('active');