Single class for styling in JavaScript

Suppose we have two classes that we give to an element depending on its state:

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

In fact, the presence of two classes here may be redundant. In this case, we can rewrite the styles as follows via the :not selector:

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

In this case, we can conveniently toggle our class, making the element active or inactive:

javascriptelem.classList.toggle('active');