A super simple way CSS custom properties naming convention

custom-property-naming-constants.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 and are not calculated */
  --FONT-SIZE-MIN-PX: var(--FONT-SIZE-MIN) * 1px;
  --FONT-SIZE-MAX-PX: var(--FONT-SIZE-MAX) * 1px;
  
  /* Direct value assignement */
  --COLOR-PRIMARY: palevioletred;
  --COLOR-SECONDARY: mediumseagreen;
 
  /* While the following isn't necessary, it's worthy to note that this
    property is just being declared, and is a end result of two constants
    i.e. it's a constant. This just makes for more readable code
    below when using this value later on in the stylesheet.
  */
  --FONT-SIZE-DIFFERENCE: var(--FONT-SIZE-MAX) - var(--FONT-SIZE-MIN);
  
  /* The property below is an interesting situation.
    100vw is actually a variant because it depends on the screen size.
    But it's not yet computed NOTE: there's no calc(). Hence, by its nature, it's a constant.
    Think of this as just text replacement.
  */
  --FONT-SIZE-LOCK:
    (100vw - var(--BROWSER-WIDTH-MIN-PX))
    / (var(--BROWSER-WIDTH-MAX) - var(--BROWSER-WIDTH-MIN));
}