tachyons.js

const html = require('choo/html')
const css = require('sheetify')

// first we import all of tachyons, it's a design system and the class names
// are the interface
css('tachyons')

// Then we define some of our variables. This is just to show these values can
// be interpolated. Realistically only colors really have to be declared here
// as they're re-used. Almost all other values will only be declared once
const black = 'rgba( 0, 0, 0, .9 )'
const green = '#41d69f'

// Then we override some of the styles to match the values of the design. We
// keep the interface the same, but change the content. Deduping the values
// from the resulting bundle will keep our CSS as light as it ever was
//
// css.global isn't a thing (yet) but defining global styles inline would be a
// valuable tool. Maybe we should make everything global by default and only
// allow namespacing by appending .local. Idk, but this demonstrates the idea
css.global`
  /* colors */
  .black { color: ${black}; }
  .green { color: ${green}; }
  .bg-black { background-color: ${black}; }
  .bg-green { background-color: ${green}; }

  /* font-sizes */
  .h1 { font-size: 3rem; }
  .h2 { font-size: 2rem; }
  .h3 { font-size: 1rem; }
`

// Now we can use these styles, with the pre-defined tachyons interface
// throughout our application:
const el = html`
  <a href="foobar.com" class="link bg-green">
    <h1 class="h1 black">Hey world</h1>
  </a>
`

// In the end we won't have to adjust a lot from tachyons. The typographic
// scale and colors would be the biggest ones. In the rare case where a design
// is very precise, we might also need to change the paddings and margins. But
// tachyons works for us in almost all cases.
//
// The added value is that instead of defining our own interface through
// classnames and inheritance we can now rely on a predefined interface that
// doesn't change in size and complexity.
//
// Sheetify's namespacing still comes in useful when prototyping elements as it
// can be faster to apply styles inline when unfamiliar with tachyons, than it
// is to find the right tachyons combination. But once an element looks the way
// it's supposed to it would be good practice to slim it down and replace as
// much of it with tachyons as possible. The more tachyons is used, the more
// common and consistent our styles will be without increasing the total API
// surface of our CSS unlike other methods.