Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unwanted selector combination and reordering

See original GitHub issue

cssmin is combining selectors with the same property set, but in doing so, reorders them in an unwanted way that breaks the CSS ordering.

Example:

.header-section + .photo-background.header-collection {
    margin-top: 0; }

.block {
    margin: 2em 1.5%; }
@media screen and (min-width: 972px) {
    .block {
        margin: 3em 2%; } }

.block-list {
    margin-top: 0; }

…is minified to…

.block-list, .header-section + .photo-background.header-collection {
    margin-top: 0; }

.block {
    margin: 2em 1.5%; }
@media screen and (min-width: 972px) {
    .block {
        margin: 3em 2%; } }

(Spacing added to minified version.)

As you can see, the selector combination breaks the CSS ordering, and .block.block-list takes the wrong margin-top. Is there some way to avoid this selector combination? Or at least make it less aggressive?

Issue Analytics

State:
Created 7 years ago
Comments:8

Top GitHub Comments

1reaction

timaikenscommented, Feb 21, 2017

Ahh, just out of date, I suppose 😞. Will update and see if it’s fixed. Thank you!

0reactions

jakubpawlowiczcommented, Mar 16, 2017

👍

Top Results From Across the Web

Selectors - W3C

In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from...

Does the order of classes listed on an item affect the CSS?

Yes, it Can (depending on the statement) ... Your question is: Does the ordering of CSS classes on a DOM element affect the...

PageSpeed: Use efficient CSS selectors (deprecated) - GTmetrix

It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules.

CSS selectors - CSS: Cascading Style Sheets - MDN Web Docs

CSS selectors can be grouped into the following categories based on the type of elements they can select. Basic selectors. Universal selector.

Precedence in CSS (When Order of CSS Matters)

It comes up any time multiple CSS selectors match an element with the exact same specificity. Assuming specificity is exactly the same, ...