Search code examples
sassstylelint

Stylelint: Expected declaration to come before rule - order/order

The code is as follows:

    .home-feat2 {
        background-color: stencilColor("color-greyLight");
        img {width: 10rem;}
        margin-bottom: spacing("single");
        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }
    }

Expected declaration to come before rule - order/order points to the line with margin-bottom: spacing("single"); however I tried looking up what this error meant but I can't find a lot of descriptive documentation on stylelint. Maybe it's because I just don't understand the terminology, but I'm having trouble finding anything on this subject. Any help is appreciated.

Solution

  • Your linters expects you to write declarations before rules.

    In CSS, a declaration is the key-value pair of a CSS property and its value, like margin-bottom: spacing("single").
    See a visual representation of a declaration block.

    A rule is the block defined by one or multiple selectors, containing declarations, like: img { width: 10rem; }.
    See a visual representation of a rule set.

    What it means for you, it means that you should probably write the rule img {} after the declarations:

        .home-feat2 {
        background-color: stencilColor("color-greyLight");
        margin-bottom: spacing("single");

        @include breakpoint("medium") {
            margin-bottom: 3rem;
        }

        img {width: 10rem;}
    }

    This specific rule purpose is to allow an easy to read code.
    When applied, you can see at the first glance that background-color and margin-bottom are applied to .home-feat2 and width is applied to img.

    edit: added some additional informations thanks to jeddy3