remove / reset inherited css from an element

Question

I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.

Answer 1

Technically what you are looking for is the unset value in CSS:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.

.customClass {
  /* specific attribute */
  color: unset; 
}

.otherClass{
  /* unset all attributes */
  all: unset; 
  /* then set own attributes */
  color: red;
}

As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:

.namespace .customClass{
  color: red;
}

because of the specificity of the selector this will only influence your own classes

It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:

.namespace{
  .customClass{
    color: red
  }
}