bjesuiter best-practice css reset (simplest)

reset.css

/* 
 * bjesuiter's CSS Reset, last updated 2024-04-30
 * My Github Gist: https://gist.github.com/bjesuiter/71bd3f919c9a70d0a41553fada832174
 *
 * Based on: Josh's Custom CSS Reset
 * Blogpost: https://www.joshwcomeau.com/css/custom-css-reset/
 *
 * Added: Font Size Considerations from this blogpost: 
 * - Blogpost: https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html
 * - Video from t3dotgg: https://www.youtube.com/watch?v=rg3zgQ3xBRc
 *  
 * A css reset scss file for an app-like shell. 
 * Can be embedded into index.html to speed up app load times. 
 * But be careful with components with shadow dom / emulated shadow dom encapsulation (= default), 
 * for which global styles will not be applied
 */

/* 1. Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
* {
	margin: 0;
}

/* 3. Allow percentage-based heights in the application */
html,
body {
	height: 100%;
}

/* Typographic tweaks! - 4. Add accessible line-height */
/* +bje: Line-height tweaks, but avoiding headings (bc. it produces big gaps)  */
body:where(:not(h1, h2, h3, h4, h5, h6)) {
	line-height: 1.5;
}

/* Typographic tweaks! - 5. Improve text rendering */
body {
	-webkit-font-smoothing: antialiased;

	/* Extension by bje - make body topmost parent for absolute positioning */
	position: relative;

	/* Extension by piccali.li */
	text-rendering: optimizeSpeed;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 7. Remove built-in form typography & honor the font/font-size selection of the user (from adrianrosseli.com blogpost) */
input,
button,
textarea,
select {
	font: inherit;
}

/* Extra: from adrianrosseli.com Blogpost abpout under-developed text boxes 
   https://adrianroselli.com/2019/09/under-engineered-text-boxen.html#Stop
*/
textarea,
input {
	letter-spacing: inherit;
	word-spacing: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 9. Create a root stacking context */
#root,
#__next {
	isolation: isolate;
}

/* More CSS Reset Extensions from 
 * https://piccalil.li/blog/a-modern-css-reset/
 *
 */

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* I only reset list-style where a list element has a role=["list"] attribute. 
This assists with some accessibility issues, expertly explained by Scott. */
/* bje: added a class .no-dot to indicate, that this rule is only intended for lists which have no dot before their items */
ul.no-dot[role='list'],
ol.no-dot[role='list'] {
	list-style: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* (from adrianrosseli.com blogpost, if print sizes are too big) */
@media print {
	body {
		/* bjesuiter: changed 8pt to 10pt  */
		font-size: 10pt;
	}
}