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 {
  /* 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

/* 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

* { --[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

: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

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 {
  --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;

vviikk

Event schedule utility function

This was forked from Brian Holt

A Pen by piggyslasher on CodePen.

License.

vviikk

vviikk

/* Hide horizontal tabs at the top of the window #1349 */
#TabsToolbar {
    visibility: collapse !important;
}

/* For only Tree Style Tab sidebar #1397 */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none !important;
}