vviikk

h1 A simple CSS Custom properties naming convention
p.large Discussed in detail in my article on medium.com.
p
  a.button View on Medium
<script src="https://gist.github.com/vviikk/fde0fced50ee27780189dd7bc028e63d.js?file=style.css"></script>

vviikk

:root {
/* Calculated properties in --kebab-case
     Prefix the property name what it's affecting. i.e. `font-size`.
     |
     |         Add some context of what it is.
     |         |
     ↓         ↓   */
  --font-size-min-px: calc(var(--FONT-SIZE-MIN) * 1px);
  --font-size-max-px: calc(var(--FONT-SIZE-MAX) * 1px);
    /*             ^ suffix with the unit type (i.e. px, rem) */

vviikk

* { --[property-it-is-used-in-later]-[context(min|max)]-[unit]--[?modifier]: 2rem; }

e.g.

--font-size-min-px: calc(var(--FONT-SIZE-MIN) * 1px);
  /* Below value affects font-size, is computed and is in pixels

vviikk

/* Increase specificity by specifying the selector twice. */
:root:root { /* makes the properties immutable, cant be reassigned */
  --COLOR-PRIMARY: palevioletred;
  --COLOR-SECONDARY: mediumseagreen;
}

:root {
  --COLOR-PRIMARY: blue; /* WON't work as `:root:root` has higher specificity. :)
}

vviikk

:root {
  /* CONSTANTS, --UPPER-KEBAB-CASE */
  --COLOR-PRIMARY: palevioletred;
  --COLOR-GRAY: silver;
  
  /* VARIABLES, mutated later (line 10), so --lower-kebab-case */
  --heading-color: var(--COLOR-GRAY);
}
h1 {
 --heading-color: var(--COLOR-PRIMARY); /* Value is overridden */

vviikk

:element {
  --[?specificity]-[context]-[?unit]--[?modifier]: 2rem;

  /* Examples */
  /* constants: */
  --PADDING-REM: 1rem;
  --COLOR-PRIMARY: palevioletred;
  --COLOR-SECONDARY: papayawhip;
  --COLOR-FOREGROUND: darkgray;
  --COLOR-BACKGROUND: snow;

vviikk

:root {
  --bg-color: black;
  --fontSize: 1rem;
  --bg_color_light: ....;
  --highlightColor: rebeccapurple;
}

vviikk

/* SCSS Variables only used for media queries. All else is custom properties. Overlook it's usage. */
$--browser-width-min: 300;
$--browser-width-max: 1600;
$--browser-width-min-px: $--browser-width-min * 1px;
$--browser-width-max-px: $--browser-width-max * 1px;
/* ^^
  Since I'm only using SCSS for the bare minimum,
  I'll not try to use a convention.
  I think the regular $--kebab-case is just fine.
  However, I just find it consistent to be prefixed with a --

vviikk

html {
  font-size: calc(
     14px + (26 - 14) *
     ((100vw - 300px) / (1600 - 300))
  );
}

vviikk

:root {
  /* CONSTANTS */
  --FONT-SIZE-MIN: 16;
  --FONT-SIZE-MAX: 26;
  
  /* Notice, no calcs used yet */
  --FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px);
  --FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px);
  
  --BROWSER-WIDTH-MIN: 300;