custom-properties-constants-naming-convention.css

custom-properties-constants-naming-convention.css

:root {
  --FONT-SIZE-MIN: 16;
  --FONT-SIZE-MAX: 26;
  
  /* The properties below are also constants, as they don't rely on any external variables */
  --FONT-SIZE-MIN-PX: var(--FONT-SIZE-MIN) * 1px;
  --FONT-SIZE-MAX-PX: var(--FONT-SIZE-MAX) * 1px;
  
  --COLOR-PRIMARY: palevioletred;
  --COLOR-SECONDARY: mediumseagreen;

  /* Uncalculated properties. */
  --BROWSER-WIDTH-MIN-PX: (var(--BROWSER-WIDTH-MIN) * 1px);
  --BROWSER-WIDTH-MAX-PX: (var(--BROWSER-WIDTH-MAX) * 1px);
  
  --FONT-SIZE-DIFFERENCE: (var(--FONT-SIZE-MAX) - var(--FONT-SIZE-MIN));
  
  --FONT-SIZE-LOCK: ((100vw - var(--BROWSER-WIDTH-MIN-PX)) / (var(--BROWSER-WIDTH-MAX) - var(--BROWSER-WIDTH-MIN)));
}