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

[WIP] Add separate base style with good defaults #13

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Feb 8, 2018

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.

@timothyis
Copy link

timothyis commented Feb 8, 2018

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.

@sindresorhus sindresorhus force-pushed the opinionated-base branch 4 times, most recently from af8df39 to f9a9045 Compare February 9, 2018 06:33
@sindresorhus sindresorhus changed the title [WIP] Add base style with good defaults [WIP] Add separate base style with good defaults Feb 9, 2018
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, that you use in addition to `modern-normalize.css`. This base can afford to be opinionated.
@Alanaktion
Copy link

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.

It causes some many weird problems. I tried `break-word` too, but it also causes problems, like `10%` being split up into two lines of `10` and `%` when using Flexbox.
@sholladay
Copy link

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

Base automatically changed from master to main January 23, 2021 17:38
@casey
Copy link

casey commented Aug 19, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants