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

Feature request: Disallow parent selectors

Open eldh opened this issue 9 years ago • 8 comments

I'd like to see a rule to disallow some parent selectors, like this:

Bad:

.Base {
  background-color: red;
  &__element {
    background-color: blue;
  }
}

Good:

.Base {
  background-color: red;
}
.Base__element {
  background-color: blue;
}

Also good, we still want to use & in other cases:

.Base {
  background-color: red;
  &:after {
    background-color: blue;
  }
}

Is this somehow already possible? Does it make sense as a rule? Is it reasonable?

Edited March 16

eldh avatar Mar 11 '16 15:03 eldh

This seems to conflict with the ::after pseudo element, which can still be written with one colon. I'd expect your second sample to compile to:

.Base {
  background-color: red;
}
.Base:after {
  background-color: blue;
}

Regardless, I don't think disallowing parent selectors is possible right now. Since there isn't an alternative to &__element, I don't think I could see using this in production.

abea avatar Mar 11 '16 16:03 abea

@abea The alternative would be using the syntax from my third example.

The reason for this is that I find the &__element syntax can get really messy for bigger modules, and explicitly defining class names makes sure you can always search for a class name to see it's rules.

eldh avatar Mar 11 '16 17:03 eldh

Ah, I misunderstood the examples. I can definitely see that.

abea avatar Mar 11 '16 20:03 abea

@abea Sorry that I was unclear!

eldh avatar Mar 12 '16 13:03 eldh

Yeah, that's a good idea. I liked this syntax at first, but it absolutely ruins search possibilities.

@eldh although, I think your second example is completely irrelevant and confusing here :)

svyatov avatar Mar 19 '16 00:03 svyatov

Yeah, I just wanted to clarify that the rule shouldn't apply to all uses of &, but I see how it can be confusing.

eldh avatar Mar 19 '16 07:03 eldh

I edited the description now to hopefully make it more clear .

eldh avatar Mar 19 '16 07:03 eldh

I had the same need, so I hacked one together at https://github.com/shukriadams/selectorConcatenation/blob/master/lib/SelectorConcatenation.rb. It was done in a hurry but it seems to work. Basically, any selector that starts with & followed by letters, numbers dashes or underscores gets flagged. Too simplistic?

And totally agree, this is one Sass feature that has created huge headaches for us when it comes to code maintenance.

shukriadams avatar Jul 07 '16 22:07 shukriadams