org.sonar.css.checks.l10n.common.overqualified-elements.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation

There is a newer version: 4.13


    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.


Noncompliant Code Example
div.mybox {
  color: red;
}

.mybox li.active {
  background: red;
}


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

p.active {
  color: green;
}


See

    CSSLint rule
        documentation