Skip to content

Instantly share code, notes, and snippets.


Glen Maddern geelen

View GitHub Profile


CSS for Components


/* Counter.css */
@import Button from './Button.css';
geelen / index.html
Last active Apr 9, 2017
Query selector speed comparison #jsbench #jsperf ( #jsbench #jsperf
View index.html
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>Query selector speed comparison #jsbench #jsperf</title>
<script src=""></script>
<script src="./suite.js"></script>
<h1>Open the console to view the results</h1>
View cm2sc.js
import React from 'react'
const cm2sc = names => Object.keys(names).reduce((comps, name) => (
{ ...comps, [name]: ({is = 'div', className, ...props}) => (
React.createElement(is, { ...props, className: [names[name], className].filter(_=>_).join(' ') })
) }
), {})
export default cm2sc
View blend mode example.js
// Doesn't work unless the image host accepts CORS = a => {
const { opacity, country, blendMode } = current
const canvas = document.createElement('canvas')
canvas.width = 1280
canvas.height = 720
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, 1280, 720)
ctx.globalCompositeOperation = 'source-over'
View button.js
import React, { PropTypes } from 'react'
import styled, { css } from 'styled-components'
const commonClasses = 'link dib f5 fw6 tracked tc br2 ttu ba pointer'
const sizes = ['large', 'small', 'extra-large']
const types = ['success', 'warning', 'danger', 'primary', 'default']
const sizedBtnClasses = {
'large': 'h3 pa3',
View debug.jsx
import React from 'react'
import styled from 'styled-components'
const Pre = styled.pre`
background-color: papayawhip;
color: palevioletred;
padding: .5rem;
font-family: monospace;
View perf.js
function makeRandomColor() {
return '#' + Math.random().toString(16).substr(-6)
let tag = document.createElement('style')
tag.type = 'text/css'
(document.head || document.getElementsByTagName('head')[0]).appendChild(tag)
let styleSheet = [...document.styleSheets].filter(x => x.ownerNode === tag)[0]
View 1_locals.css
/* equivalent to postcss-local-scope. INPUT: */
.outer {
color: papayawhip;
box-shadow: 0 0 10px;
/* OUTPUT: */
@export .outer ".outer-abcs12r3adudas";

Global traits, local components

The idea is to combine the best bit of global styling (reuse, small payload) and local styling (total isolation, first-class React syntax)

This is combined with the concept of traits: you can think of them as permitted property/value pairs. Instead of every component being able to have every CSS property available to it, you can reduce your permitted set to X font families, Y font-size + line-height pairs, Z foreground/background colour pairs, W padding amounts. This is based off my work using amcss on real projects — traits were the single key feature that kept me using AM.

The one-sentence explanation: A site defines a set of permitted visual features, all components are simply a combination of those features


geelen /
Last active Aug 29, 2015
Alternate approaches to nextTick

setTimeout & nextTick were in source-definition order. No matter how many promises I added, they always got executed first. handy!

All of them fire immediately after the animation frame has fired: