CODEWITHSUNDEEP
sassstylelint
Deo3560
Deo3560

Reputation: 45

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.

Upvotes: 1

Views: 3106

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3456

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

Upvotes: 3

Related Questions