Reset/normalize styles for a nice blank slate.
See joshcomeau.com/css/custom-css-reset
These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect.
Featuring:
box-sizing: border-box;-- Sizes based onbarder-box, notcontent-box.margin: 0-- Remove default margin. Add margins as needed in application CSS.line-height: calc(2px + 2ex + 2px);-- Dyslexia friendly line height.
Note
You may want to override the line-height for headings in your application CSS.
See this article for more info about line-height.
-webkit-font-smoothing: antialiased;-- Chrome and Safari still use subpixel antialiasing by default, which is bad on high DPI screens.- Use block display by default for media tags, like
imgandvideo. - Inherit fonts for form controls
fontis a rarely-used shorthand that sets a bunch of font-related properties, likefont-size,font-weight, andfont-family.
- Avoid text overflows -- Permission to use hard wraps when no soft wrap opportunties can be found
- Improve line wrapping -- widows and orphans
- Root stacking context -- OPTIONAL -- Create a new stacking context without needing to set a
z-index. See What The Heck, z-index??
bonus
npm i -S @substrate-system/css-normalizeIf you are a bundling your CSS, e.g. with vite, just import from this module in your javascript:
import '@susbtrate-system/css-normalize'Or import the minified CSS:
import '@substrate-system/css-normalize/min'This package includes minified CSS also.
- Copy the CSS so it is accessible to your web server. The minified file is at
dist/index.min.css.
cp node_modules/@substrate-system/css-normalize/dist/index.min.css ./public/normalize.css- Add a link in your HTML.
<head>
<link rel="stylesheet" href="/normalize.css">
</head>
<!-- ... -->