scss-lint icon indicating copy to clipboard operation
scss-lint copied to clipboard

Linter to avoid using html elements as selectors

Open mkronenfeld opened this issue 7 years ago • 2 comments

Hey there,

is there an option to avoid using html elements as selectors?

We are using the hyphenated_BEM convention and facing the following problem very often:

.button {
    // Okay
    &__label {
        color: $white;
    }

    // Wrong
    span {
        color: $white;
    }
}

However it is totally okay for us to style on elements f.e. in a reset file:

// scss-lint:disable AvoidElements
span {
    color: $white;
}
// scss-lint:enable AvoidElements

Do you have any solution for this? Perhaps I have overlooked something.

Best regards Marvin

mkronenfeld avatar Dec 06 '17 10:12 mkronenfeld

If you want to write a linter ElementSelector which forbids any references to elements, this would be pretty easy. See IdSelector as an example. Would essentially need to rename visit_id to visit_element.

Happy to accept a pull request (but this linter should be disabled by default).

sds avatar Jan 09 '18 07:01 sds

Was this ever done?

osartun avatar May 14 '19 10:05 osartun