bigskysoftware / bigskysoftware/missing

A (more) modern CSS reset

Open
#45 9 comments 0 reactions 1 assignee Claimed by @dz4k View on GitHub
enhancement help wanted
Dominant language
CSS
Stars
798
Forks
29
PR merge metrics
No merged PRs in 30d

Description

This project is currently using [**sanitize.css**](https://github.com/csstools/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):

```css
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.