:not(.active) vs overriding active class

There are times when you need to toggle classes with javascript. Perhaps it is part of a many items you would only want to show an active one amongst many. So you got this piece of javascript:

JavaScript

element.classList.toggle('active');

Makes you wonder when writing your bit of css, some would go for something like this:

SCSS

.item {
  display: none;
  border: 1px solid #ccc;

  &.active {
    display: block;
  }
}

For me, I would prefer the inverse…

Read More