Discussion on: The Powerful CSS not Selector

[Mihail Malo]

You have to admit that

.button {
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  &:hover {
    cursor: pointer;
  }
  &:disabled {
    cursor: not-allowed;
  }
}

.button--primary {
  background: $button--primary;
  color: white;
  &:hover {
    background: $button-primary-hover;
  }
  &:disabled {
    background: $button-primary-disabled;
  }
}

which just applies the :disabled because it comes later at same specificity is nicer.

[Christian Kozalla]

Agree 100% - in addition, the above code uses nesting and Sass &
Good job 👍

[Mihail Malo]

Prompted by your comment, I wanted a reminder of what SCSS vs Sass syntax looks like, and the current example is literally a button with hover 😂🤣

[Christian Kozalla]

Uh, I didn't really mean Sass.. I use "Sass" and "SCSS" interchangeably. Although I know it isn't :D

[Mihail Malo]

I gathered 😂

[Braydon Coyer]

Yep, absolutely. But as I mentioned in the article, I chose to forgo the disabled property to show a specific use-case for the selector. The nesting is also a plus with SCSS, but I opted against it to allow others to follow a little easier.

Love the suggestion, though :)