I am looking for a way in JS to inspect or check current state of CSS rules dynamically at runtime (using browser's reflection feature, possibly) instead of only relying for browser developer's tool to see which rules are "overriden" or filtered. To think an analogy in procedural languages, there's normally a way to check the status or result of each instruction or function that we call (e.g true/false).

.mybutton#submit {
  color: red;
}
.mybutton {
  color: blue;
}

In other words, I am asking if there is an easy way to implement hypothethical is_valid below.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
is_valid(rules[0]); //True
is_valid(rules[1]); //False