/csslint

Disallow adjoining classes

Daniel Toman edited this page Dec 30, 2016 · 4 revisions

Adjoining classes, sometimes also called class chaining, look like .foo.bar. While technically allowed in CSS, these aren't handled properly by Internet Explorer 6 and earlier. IE will match the selector as if it were simply '.bar' which means your selector will match more frequently than you intend it to and create cross-browser bugs.

Generally, it's better to define styles based on single classes instead of based on multiple classes being present. Consider the following:

.foo {
    font-weight: bold;
}

.bar {
    padding: 10px;
}

.foo.bar {
    color: red;
}

The rule for selector .foo.bar can be rewritten as a new class:

.foo {
    font-weight: bold;
}

.bar {
    padding: 10px;
}

.baz {
    color: red;
}

That new class, baz, must now be added to the original HTML element. This is actually more maintainable because the .baz rule may now be reused whereas the .foo.bar rule could only be used in that one instance.

Rule Details

Rule ID: adjoining-classes

This rule is intended to flag uses of adjoining classes that will fail in Internet Explorer 6 and earlier.

The following patterns are considered warnings:

.foo.bar {
    border: 1px solid black;
}

.first .abc.def {
    color: red;
}

The following patterns are considered okay and do not cause a warning:

/* space in between classes */
.foo .bar {
    border: 1px solid black;
}

Further Reading