Minimize :not() CSS pseudo-class usage
Introduction
Overuse of the :not() selector may cause specificity issues and, is harder to understand what is going on in the code.
Decision
Avoid using the :not() pseudo-class selector in CSS whenever possible, opting for more specific and direct selectors instead.
Context
The :not() selector often leads to complex and hard-to-maintain stylesheets with specificity issues if overly used or not scoped properly.
Consequences
- Specificity challenges: In many cases, using
:not()might require adjusting specificity, which could complicate the cascade. - Readability issues: Needs more time to figure out the target element.
Exceptions
- When inheriting the codebase, with complex css. However, the usage MUST be scoped and specified as much as possible.
- When using css frameworks and libraries, again, the usage MUST be scoped and specified as much as possible.