Skip to content

Instantly share code, notes, and snippets.

@jensimmons
Created February 1, 2018 20:13
Show Gist options
  • Save jensimmons/f3223580fdff021e70203b441683b4e4 to your computer and use it in GitHub Desktop.
Save jensimmons/f3223580fdff021e70203b441683b4e4 to your computer and use it in GitHub Desktop.
Jen Simmons 2018 Reset Stylesheet in Progress
* {
box-sizing: border-box;
}
sub, sup {
font-size: inherit;
vertical-align: sub;
line-height: normal;
top: 0;
bottom: 0;
}
@jensimmons
Copy link
Author

Some resets attempt to style everything, replacing most or all of the user agent stylesheets with a base custom look. Others attempt to adjust everything that's slightly different from browser to browser, while leaving everything else alone.

I thought I'd try an even simpler approach — and create a reset stylesheet that only overrides the things in the user agent stylesheets that everyone would like to change, but can't change because of backwards compatibility. For example, most everyone in the CSSWG now agrees the box model should have used the border-box for sizing, but we can't just change it now (from content-box), because millions of old websites would break. But it should be box-sizing: border-box; And I don't have to worry about millions of websites. I only have to worry about the one I'm building. So I'll change that.

This reset is a list of such things.

It won't "even out" the small differences from one browser to another. I'm just going to say "WHATEVER!" It's ok for browsers to have slightly different sized input fields, or whatever. At least as far as my universal stylesheet goes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment