border: 0;とborder: none;のそれぞれのメリットは？

Question

CSSのガイドラインをつくるにあたって、
いろいろ調べている際に以下のガイド見つけました。

Airbnb CSS / Sass スタイルガイド

ここで以下のようなことが書かれていました。

ボーダーのないスタイルにはnoneの代わりに0を使うこと。

要するに以下のようにある要素のボーダーを消したいときに、border: 0;を推奨すると言っています。

.box {
    border: none; //NG
    border: 0;  //OK
}

問題

なぜこのスタイルガイドはborder: 0;を推奨しているのでしょうか。
border: none;とborder: 0;の明確な違い(メリット・デメリット)は何なのでしょうか？

初歩的な質問かと思いますがどうぞよろしくお願いします。

調べたこと

以下のページなどで

border:0 は border-width, border:none は border-style

であることなどはわかったのですが、CSSの運用においてそれぞれのメリット・デメリットまではよくわかりませんでした。

参考：border:0 と border:none は何が違うのか

Answer 1

こんな感じにするとnoneだと出ちゃうからですかね？
あんまりこういうのをすることがないと思うので、どちらでもいい気がしますが…

.border-none {
	border: none;
}
.border-zero {
	border: 0;
}
.border-width {
	border-width: 1px;
}
.border-style {
	border-style: solid;
}

<div class="border-none border-width">none-width 出ない</div>
<div class="border-none border-style">none-style 出る</div>
<div class="border-zero border-width">zero-width 出ない</div>
<div class="border-zero border-style">zero-style 出ない</div>

Comments

[5o5o_wagon]

回答ありがとうございます！
なんとなくわかりましたが、
.border-zeroに.border-widthが上書きされても表示されないのはなぜなんでしょうか？？

[gin]

上から、
style:none, width:1px
style:solid, width:initial
style:initial, width:1px
style:initial, width:0
だからですかね。

styleのinitialはnoneですが、widthのinitialはmediumで0ではありません。
ブラウザによると思いますが。

つまり両方がON状態になる2番目だけ出るということじゃないでしょうか。＜mediumのborderが出るので若干太いと思います

[5o5o_wagon]

とてもわかりやすく説明いただきありがとうございます！
初期値の違いから、widthを0にする方が確実で良いということですね！
すっきりしました！