Readable REMs 62.5% trick (1.6rem = 16px) + How to use it(not use it) with the WordPress block editor

gistfile1.txt

/* _typography.scss - file */

:root {
  --fs-base: 1.6rem;
  --h1-size: 3.6rem;
  
/* NOTE: Use set of predefiend spacing for coherent look and easy updating.
   Make sure you use spacing variables with predefined values for +90% of your CSS (padding: var(--gap-md);),
   use css calc (margin-top: calc(var(--gap-sm) * -1); = -1.2rem) to make modifications; */
     
  --gap-sm:    1.2rem;
  --gap-base:  var(--fs-base);
  --gap-md:    3.2rem;
  --gap-lg:    6.4rem;
}

html {
  font-size: 62.5%; /* sets the base font size to 10px, 62.5% of 16px = 10px; */
}

body {
  font-size: var(--fs-base); /* now REMs are readable/usable, 1.6rem = 16px; */
}

h1 {
  font-size: var(--h1-size);
}


/* NOTE: When to use PX over REMs
- On border size(stroke) don't use REMs (border: 0.1rem solid white), use PX, correct way (border: 1px solid white),
becase you don't want the border size to grow if the font-size is increased or decreased, this includes the media-queries too.
For everything else use REMs. */



/* editor-styles.scss - file | WordPress block editor styles */

/* NOTE: If the css vars with REMs where used correctly we, can now import the front-end typography styles (_typography.scss) 
into the back-end block editor and with minimal effort get the same look as the front-end; 
Bellow we switch from REMs to PX because the readable rems trick don't work in the block editor. */

@use "typography"; 


/* NOTES:

- If the editor-styles.css file is loaded via add_editor_style( 'editor-style.css' ), 
everything in the file is prefixed with ".editor-styles-wrapper" class;
- "body" = ".editor-styles-wrapper";
- ":root" styles are discarded;
- Separate admin styles can be enqued "editor-reset.css" that can be used for styles outside ".editor-styles-wrapper",
for example different widths for page and post of the block-editor; */


body {
  --fs-base: 16px; /* Here we reset the font-size back to PX, because the above trick don't work in the WordPress block editor; */
  --h1-size: 36px;
  
  --gap-sm:   12px;
  --gap-base: var(--fs-base);
  --gap-md:   32px;
  --gap-lg:   64px;
}