A (more) modern CSS reset

This project is currently using sanitize.css which is not updated for 3 years.

overflow-wrap: break-word too offensive but it's ok.

Points against using sanitize.css:

Unnecessary declarations that opinionated and not needed:

1. background-repeat: no-repeat;, no need to set this, it should be using default behavior which is repeat to be more predictable.

2. text-decoration: inherit; text-decoration property used in those elements: a, s, u, del, ins, strike and there is no need to set the inheritance over ::before, ::after, same for vertical-align: inherit.

3. cursor: default in most elements cursor: default is a default value and another things like cursor: auto for input, textarea, so it's no need to set up, let the browser do its thing.

4. In abbr[title] there is 2 declarations indeed duplicated: underline then underline dotted as values, underline dotted used by Firefox as default (so it should be used as only declaration):

abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

5. small font-size: 80% unneeded because it's font set it up 2 see: main.css = font-size: .8em;

6. margin: 0 to button, input, select elements: not needed because button, margin has no margin and input[type="*"] have some margins but not big numbers so something like Stack layout would be adorable and it wouldn't need us to set margin to 0. ( .stack>+{ margin-block-start: 1rem } )

7. -webkit-appearance: button should be avoided to use.

8. border: 1px solid #a0a0a0 set for fieldset to achieve "Change the inconsistent appearance in all browsers (opinionated)." but actually there is no inconsistency: see https://browserdefaultstyles.com/#fieldset default value is border: groove 2px ThreeDFace

9. margin: 0 to textarea: textarea has no margin by default: https://browserdefaultstyles.com/#textarea

10. input[type="search"] no need for those declarations because outline-offset is 0 by default see: https://browserdefaultstyles.com/#[type=search]

11. In fact vendor specific things should be avoided...

12. :focus-visible isn't needed but :target is fine but no need for z-index: 2

13. summary declaration is ok but it's better to use just summary and not details > summary:first-of-type because website authors themselves shouldn't add more then one summary to details element and for not increasing specificity it's better to stick with summary.

14. datalist { display: none } unnecessary it's default see: https://browserdefaultstyles.com/#datalist

For text-size-adjust: this article is good but I don't know, if you ask me it's unnecessary, it's a good feature in modern - mobile browsers, but yeah: https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

[benatkin]

Is having the pointer for text instead of the I-bar not a conscious choice? I thought it felt weird but realized that it's less distracting and probably better

[benatkin]

Confirmed that sanitize.css has the unusual, but perhaps superior, choice of forgoing I-bars for selecting text to copy it (still shows in form elements). https://csstools.github.io/sanitize.css/ https://codepen.io/p-dg/pen/rLNPmv

[geoffrey-eisenbarth]

I was reading plainvanillaweb and they recommended modern-normalize. I do not know if it addresses all (or any) of the issues in the OP, however.

Other resources:

• Josh W Comeau's CSS Reset
• Andy Bell's CSS Reset

[geoffrey-eisenbarth]

Currently sanitize.css sets :focus-visible { z-index: 32 }, which is higher than our .navbar { z-index: 5 }.

[geoffrey-eisenbarth]

I wonder if this should get pushed to v2.0 bc of the possibility of subtle "breaking" changes.

It would be nice if there was a css diff that could intelligently determine the practical difference of missing.css compiled with different css resets. I'm not sure if Semantic diff does this or not, but it came up in a poorly worded internet search.

[geoffrey-eisenbarth]

After a bit more in depth review, I've determined that:

• I agree with most of the points in OP
• Just using the "modern reset" I linked above probably wouldn't be sufficient, particularly bc our current supported browser list contains older versions of modern browsers.
• Even though things like background-repeat: no-repeat are not explicitly utilized by missing.css, we can't be sure that someone using a CDN with @latest isn't unknowingly depending on them.

I think for V2.0 we can probably just roll our own based on some of the ones I linked above. That way we can properly document breaking changes, like background-repeat.

[geoffrey-eisenbarth]

Another future reference:
https://frontendmasters.com/blog/the-coyier-css-starter/