modern-normalize
modern-normalize copied to clipboard
[WIP] Add separate base style with good defaults
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
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.
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.
Would be nice to hear how this intends to differ from sanitize.css, which I've been using for a while to good effect.
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.)