Repository navigation
A (more) modern CSS reset #45
Description
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:
-
background-repeat: no-repeat;, no need to set this, it should be using default behavior which isrepeatto be more predictable. -
text-decoration: inherit;text-decorationproperty used in those elements:a, s, u, del, ins, strikeand there is no need to set the inheritance over::before, ::after, same forvertical-align: inherit. -
cursor: defaultin most elementscursor: defaultis a default value and another things likecursor: autoforinput, textarea, so it's no need to set up, let the browser do its thing. -
In
abbr[title]there is 2 declarations indeed duplicated:underlinethenunderline dottedas values,underline dottedused by Firefox as default (so it should be used as only declaration):
abbr[title], acronym[title] {
text-decoration: dotted underline;
}-
smallfont-size: 80%unneeded because it's font set it up 2 see:main.css=font-size: .8em; -
margin: 0tobutton, input, selectelements: not needed becausebutton, marginhas no margin andinput[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 } ) -
-webkit-appearance: buttonshould be avoided to use. -
border: 1px solid #a0a0a0set forfieldsetto achieve "Change the inconsistent appearance in all browsers (opinionated)." but actually there is no inconsistency: see https://browserdefaultstyles.com/#fieldset default value isborder: groove 2px ThreeDFace -
margin: 0totextarea: textarea has no margin by default: https://browserdefaultstyles.com/#textarea -
input[type="search"]no need for those declarations because outline-offset is 0 by default see: https://browserdefaultstyles.com/#[type=search] -
In fact vendor specific things should be avoided...
-
:focus-visibleisn't needed but:targetis fine but no need forz-index: 2 -
summarydeclaration is ok but it's better to use justsummaryand notdetails > summary:first-of-typebecause website authors themselves shouldn't add more then one summary to details element and for not increasing specificity it's better to stick withsummary. -
datalist { display: none }unnecessary it's default see: https://browserdefaultstyles.com/#datalist
Activity
benatkin commentedon May 12, 2025
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 commentedon May 12, 2025
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 commentedon May 25, 2025
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:
geoffrey-eisenbarth commentedon Jul 1, 2025
Currently
sanitize.csssets:focus-visible { z-index: 32 }, which is higher than our.navbar { z-index: 5 }.geoffrey-eisenbarth commentedon Jul 9, 2025
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 commentedon Jul 13, 2025
After a bit more in depth review, I've determined that:
background-repeat: no-repeatare 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 commentedon Sep 26, 2025
Another future reference:
https://frontendmasters.com/blog/the-coyier-css-starter/
geoffrey-eisenbarth commentedon Apr 8, 2026
List of references:
Notes
a, .<a>, maybe pointer on<summary>