sds / scss-lint

Configurable tool for writing clean, consistent SCSS
MIT License
3.66k stars 465 forks source link

Linter to avoid using html elements as selectors #931

Open mkronenfeld opened 6 years ago

mkronenfeld commented 6 years ago

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

sds commented 6 years ago

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).

osartun commented 5 years ago

Was this ever done?