search

bigskysoftware / missing

The classless-ish CSS library you've been missing
https://missing.style
BSD 2-Clause "Simplified" License
544 stars 24 forks source link

A (more) modern CSS reset #45

Open ghost opened 8 months ago

ghost commented 8 months ago

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;
}

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

  2. 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 } )

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

  4. 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

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

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

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

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

  9. 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.

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

ghost commented 8 months ago

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/