:not(.active) vs overriding active class

:not(.active) vs overriding active class

css development
,

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
1
element.classList.toggle('active');

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

SCSS
1
2
3
4
5
6
7
8
.item {
  display: none;
  border: 1px solid #ccc;

  &.active {
    display: block;
  }
}

For me, I would prefer the inverse, there are several reasons for that. Let me show you what I mean first.

SCSS
1
2
3
4
5
6
7
.item {
  border: 1px solid #ccc;

  &:not(.active) {
    display: none;
  }
}

Why I prefer this way, one is that it does not need to override any styles. What I find is when you are overriding styles, complexity will grow and it can become messy to debug later on. Another reason is that you don’t need to know the display of the original state e.g. block or inline. By going with this approach, it will give you more flexibility when writing your css.

This is my first blog post and I hope you guys enjoy it, having said that I will try to share alot of interesting stuff frequently. I don’t anticipate many readers for this yet, but if you happen to like this post please comment below and let me know what you think.