Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A (more) modern CSS reset #45

Open
ghost opened this issue Feb 7, 2024 · 1 comment
Open

A (more) modern CSS reset #45

ghost opened this issue Feb 7, 2024 · 1 comment
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@ghost
Copy link

ghost commented Feb 7, 2024

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
Copy link
Author

ghost commented Feb 7, 2024

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/

@dz4k dz4k added enhancement New feature or request help wanted Extra attention is needed labels Jun 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant