UX Design and Development course

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).

Removing the element name also loosens the coupling between your CSS and your HTML, allowing you to change the element on which the class is used without also needing to update the CSS.

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;

I disagree

While I agree that over-qualified selectors are bad, I totally disagree that there are use cases when this should be allowed. Having a single selector that will have different behaviors and/or different properties being dependent on the placement of the selector on a DOM element is nothing more then totally confusing.

In my opinion, this is a poor practice and should never be done.