Moden CSS reset

main.css

/* 
   Define cascade layer order.

   Layers MUST evaluated BEFORE selector specificity.
   This guarantees that component styles can always
   override reset styles without needing stronger selectors
   or !important.

   Order = lowest → highest priority.
*/
@layer reset /* , base, accessibility, internationalization, theme; */

@import "reset.css" layer(reset);
/* 
@import "base.css" layer(base);
@import "accessibility.css" layer(accessibility);
@import "internationalization.css" layer(internationalization);
@import "theme.css" layer(theme);
*/
 

reset.css

/*
   RESET LAYER
   ----------
   Lowest-priority styles that establish predictable browser
   behavior and layout "physics". These should never win
   against real component styling.
*/
@layer reset {

	/*
	   :where() intentionally sets ZERO specificity.

	   This allows any later component rule to override
	   the reset easily, regardless of selector complexity.

	   Without :where(), `#app` would carry ID specificity
	   and become harder to override.
	*/
	:where(#app) {

		/* Create an isolated stacking context so z-index
		   inside the app cannot conflict with host page layers.
			 No more, z-index: 99999 games */
		isolation: isolate;

		/* Establish a local positioning reference for absolute/fixed
		   children so overlays anchor to the app boundary.
			 top: 0 means top of #app */
		position: relative;

		/* Provide an accessible, readable default line spacing */
		line-height: 1.5;

		/* Improve font rendering on WebKit/macOS browsers */
		-webkit-font-smoothing: antialiased;

		/* Apply predictable border-box sizing everywhere so
		   padding and borders do not change declared dimensions */
		&,
		& *,
		& *::before,
		& *::after {
			box-sizing: border-box;
		}

		/* Normalize media behavior:
		   - remove inline baseline gaps
		   - prevent overflow
		   - enable responsive scaling */
		& img,
		& picture,
		& video,
		& canvas,
		& svg {
			display: block;
			max-width: 100%;
		}

		/* Ensure form controls inherit typography instead of
		   using inconsistent browser default fonts */
		& input,
		& button,
		& textarea,
		& select {
			font: inherit;
		}

		/* Prevent long unbroken text (URLs, hashes, tokens)
		   from overflowing layout containers */
		& p,
		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6 {
			overflow-wrap: break-word;
		}

		/* Improve paragraph line wrapping for more natural reading */
		& p {
			text-wrap: pretty;
		}

		/* Balance multi-line headings for improved visual rhythm */
		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6 {
			text-wrap: balance;
		}
	}
}