border none: explanation

[paceaux]

Howdy, I'm trying to get to the bottom of why border:none is specifically disallowed:
https://github.com/bjankord/stylelint-config-sass-guidelines/blob/master/src/.stylelintrc.json#L21

I see that this is based on sass guidelines, but the Sass Guidelines never recommend border: 0 over border: none explicitly.

The Sass Guidelines are based on CSS Guidelines, but Harry Roberts never recommends this rule.

The Sass Guidelines are also following SCSS lint, and SCSS Lint has this rule for border:0, but it, too, never explains why.

SCSS-Lint has multiple examples of specifically surfacing an error for border: none but without explanation.

So I'm making the rounds trying to determine why this rule exists and what benefit it serves. Could you provide an explanation?

[sarahdayan]

I believe this is why.

If you set a border-style to an element with border: none in a ruleset which selector has higher specificity, it overrides the fact that you set it to none. This breaks the open/closed principle .

[paceaux]

@sarahdayan I ended up publicly ranting about this issue on twitter where my conclusion similar to yours. It seems to lie within a use-case where, in the case of wanting to return border to an element, more work must be done with border: none than border-style: none or border-width: 0;

I think my chief complaint here is that in all of my investigation, this isn't explained. I think if this rule persists in the guidelines, it should have a proper error message that explains why.

[bjankord]

@paceaux This lint rule came from SCSS-Lint. From their docs, "border: 0 and border: none are fundamentally different, as they are both shorthands. The intent of this linter is to enforce consistency, rather than define which is "better.""

That's how I view this lint rule as well, it primarily drives consistency, but it also helps with some more nuanced use-cases around border styling. I don't really have a good answer beyond that but I really like demo and explanation with regards to the open/close principle from @sarahdayan.

I can updated the readme section on this rule to indicate that this rule is primarily about consistency.