CSS boilerplate structure that prioritizes user preferences

css-starting-structure.css

/* VARIABLES */
/* SASS VARIABLES - WILL BE PREPROCESSED */

$mobile-breakpoint: 768px;

/* CSS VARIABLES - WILL BE RENDERED IN BROWSER */ 
:root { 
  /* COLORS */ 
  /* --example-color: #000000; */

  /* FONT SIZES */ 
  /* --example-size: 1.5rem; */

}

/* PREFERS DARK MODE */
/* Does this design accomodate viewers who prefer a dark color scheme? */
@media(prefers-color-scheme: dark) {
  :root {
  
  }
}

/* PREFERS REDUCED MOTION */
/* Does this design accomodate viewers who prefer reduced motion? */
@media (prefers-reduced-motion) {
  :root {
  
  }
}

/* GLOBAL STYLES */ 
:root {
  
}

/* DESKTOP-ONLY STYLES */
@media only screen and (min-width: ($mobile-breakpoint+1px)) {
  :root {

  }
}

/* MOBILE-ONLY STYLES */
/* Does this design accomodate viewers using a small screen or screen magnifier? */
@media only screen and (max-width: $mobile-breakpoint) {
  :root {

  }
}