Disallow overqualified elements

Writing selectors such as li.active are unnecessary unless the element name causes the class to behave differently. In most cases, it's safe to remove the element name from the selector, both reducing the size of the CSS as well as improving the selector performance (doesn't have to match the element anymore).

Rule Details

Rule ID: overqualified-elements

This rule is aimed at decreasing byte count by removing extra unnecessary qualifiers from selectors. As such, it warns when an element and class name are used together (i.e., li.active). It will not warn if two different elements are found with the same class name (i.e., li.active in one rule and p.active in another).

The following patterns are considered warnings:

div.mybox {
    color: red;   
}

.mybox li.active {
    background: red;
}

The following patterns are considered okay and do not cause warnings:

/* Two different elements in different rules with the same class */
li.active {
    color: red;
}

p.active {
    color: green;
}