Instantly share code, notes, and snippets.

Writing CSS

Tommy Hodgins tomhodgins

View GitHub Profile
View expressions.js
const builtins = [
['+', (head=0, ...tail) => tail.reduce((acc, num) => acc += num, head)],
['-', (head=0, ...tail) => tail.reduce((acc, num) => acc -= num, head)],
['*', (head=0, ...tail) => tail.reduce((acc, num) => acc = acc * num, head)],
['/', (head=0, ...tail) => tail.reduce((acc, num) => acc = acc / num, head)],
['repeat', (head='', tail) => head.repeat(tail)],
['concat', (head, ...tail) => [head, ...tail]],
['join', (head, ...tail) => [...tail].join(head)]
View html-expressions.js
const tagNames = ['html', 'head', 'title', 'base', 'link', 'meta', 'style', 'body', 'article', 'section', 'nav', 'aside', 'hgroup', 'header', 'footer', 'address', 'p', 'hr', 'pre', 'blockquote', 'ol', 'ul', 'menu', 'li', 'dl', 'dt', 'dd', 'figure', 'figcaption', 'main', 'div', 'a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'ruby', 'rt', 'rp', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'i', 'b', 'u', 'mark', 'bdi', 'bdo', 'span', 'br', 'wbr', 'ins', 'del', 'picture', 'source', 'img', 'iframe', 'embed', 'object', 'param', 'video', 'audio', 'track', 'map', 'area', 'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 'form', 'label', 'input', 'button', 'select', 'datalist', 'optgroup', 'option', 'textarea', 'output', 'progress', 'meter', 'fieldset', 'legend', 'details', 'summary', 'dialog', 'script', 'noscript', 'template', 'slot', 'canvas', 'hr', 'button', 'marquee', 'meter', 'progress', 'select', 'textarea', 'marquee']
tagNames.forEach(tagName => window[tagName
View input.dsl
Let the default background color be black.
Let the default color be white.
Let the default font family be Helvetica.
Make the margin of all h1 elements be 0.
Make the background color of all div tags be red.
Make the padding of all div tags be 20 px.
View apply-like-functionality.html
<a href=# class=primary>Primary</a>
<a href=# class=secondary>Secondary</a>
[--button] {
text-decoration: none;
cursor: pointer;
[--small] {
padding: .25em;
View media-queries-to-element-queries.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Converting Media Queries into Element Queries in 2019</title>
<div>Element query test</div>
body {
margin: 0;
View eq-ie8-2019.html
<div>Test Me!</div>
<div style="width: 75%;">Test too!</div>

Types of Preprocessing

We want to end up with this as the result, but we want to:

  • use a variable while writing the stylesheet
  • output a width and height property with the variable's value in PX units
div {
View cssom-insanity.js
View pig-latin.js
function pigLatin(string='') {
return string
.split(' ')
.map(string => string.replace(/\b([^aeiouAEIOU]*)(\w+)\b/, '$2$1ay'))
.join(' ')
View process-rules.js
export default function(stylesheet, callback) {
const readRules = list => Array.from(list.cssRules).forEach(rule => {
if (rule.cssRules !== undefined) {
if (
[stylesheet, stylesheet.cssRules, callback].every(thing => thing !== undefined)
&& === 'Function'