Reset makes hr vanish

[raphaelgoetter]

Hello,

all: unset resets all borders to zero, which makes <hr> tags disapear :

Codepen : https://codepen.io/raphaelgoetter/pen/rNvmWwY?editors=1100

[graymatter00]

Hi @raphaelgoetter,

I believe what you are seeing is the intended result. That is, resetting all CSS properties to their default (inherited or initial) values according to the HTML specification.

In the case of the border property on the <hr> tag, all: unset will set the border-style property to its initial value of none, resulting in no border being displayed. The initial value is applied because the border-* properties do not inherit their values.

Refer to...
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/border

The intention is that after applying the-new-css-reset, you then set the desired CSS for the <hr> and all other relevant tags in your project. Or, as explained by @elad2412 in the README.md, you could use revert to return the <hr> tag back to the default styles of the browser. Such as...

hr {
    all: revert;
}

[raphaelgoetter]

Hello,

Yes, I understood that the purpose of the reset was to reset the display of the elements... but in this case for this particular element the fact that it disappears completely is a real problem, no?

[elad2412]

@raphaelgoetter, as mentioned before, this CSS reset is to remove most of the default styles so that the developer can develop its styles without any conflicts.

You can see on the "read me" file that input and focus styles are being removed as well, and so does the styles of the <hr> element :-)