modern-normalize icon indicating copy to clipboard operation
modern-normalize copied to clipboard

[WIP] Add separate base style with good defaults

Open sindresorhus opened this issue 6 years ago • 4 comments

While modern-normalize.css is great for ensuring consistency, the default browser styles are not that nice. The goal of modern-base.css is to be a better base style that you use in addition to modern-normalize.css. This base can afford to be opinionated.

Happy to consider suggestions for what to include, but only essential things.

  • [] Improve line height: https://github.com/sindresorhus/modern-normalize/issues/4#issuecomment-364674210

sindresorhus avatar Feb 08 '18 19:02 sindresorhus

Looks great! I think a browsers job isn't to provide defaults for accessibility (such as underlines for links) since they're removed so frequently out of misunderstanding why they're there in the first place. Providing a base of better looking defaults could allow designers/developers to learn about accessibility without worrying about overwriting browser defaults.

Would love for there to be a default for making rem units easier to use. Adding font-size: 62.5% to the html element makes the root font-size 10px by default. You can restore the browsers default on the body element with font-size: 1.6rem. So in the end you can use rem units by a multiple of 10. For example: 1.8rem = 18px. The benefit of rem units being easier to use doesn't remove the fact that the standard font-size is still 16px (the default/should-be default for browsers).

This should hopefully motivate more people into using rem units for better accessibility with font-size zooming.

Perhaps the base would be a better place to use system fonts too.

timothyis avatar Feb 08 '18 20:02 timothyis

I really like this. The one thought I have is that the a should have text-decoration: underline for :focus as well as :hover, so that keyboard navigation still has visual feedback. This seems to be the most common implementation when the text-decoration is removed by default for links.

Alanaktion avatar Feb 23 '18 00:02 Alanaktion

Would be nice to hear how this intends to differ from sanitize.css, which I've been using for a while to good effect.

sholladay avatar Jan 14 '19 08:01 sholladay

I think a few things from modern-normalize.css should probably go in here, namely the tab size decrease, and the box model change. This would reduce the cognitive load a little bit when deciding whether to adopt modern-normalize.css, because then you don't need to think about whether or not to adopt the opinionated parts or not. (I happen to think the opinionated parts are great, and would include modern-base.css as well, it would just be nice if they were separate.)

casey avatar Aug 19 '22 19:08 casey