zilch

Thoughts on Tachyons and what to do about it

Documentation

The good:

• With tachyons you can just switch classes on and off
• Consistency around padding, margins, colors, etc.

The bad:

• Last 5% of a design usually requires some custom styling
• Challenging if you need something in between

Ideas

• Tachyons is pretty much just shorthand classes for properties with good default values. For the most part, you're just composing properties together. One way to chip away at the last 5% is to provide every value.

• The harder part is the values

Approach

Take top CSS frameworks and sites with big CSS, build a frequency list of their properties, then sort by most frequently used properties. Most used properties get the shortest prefixes:

Results

{
  "a": "animation",
  "ac": "align-content",
  "ad": "animation-duration",
  "afm": "animation-fill-mode",
  "ai": "align-items",
  "aic": "animation-iteration-count",
  "an": "animation-name",
  "and": "animation-delay",
  "anid": "animation-direction",
  "aps": "animation-play-state",
  "as": "align-self",
  "atf": "animation-timing-function",
  "b": "background",
  "bac": "background-clip",
  "bar": "background-repeat",
  "bas": "background-size",
  "bb": "border-bottom",
  "bbc": "border-bottom-color",
  "bblr": "border-bottom-left-radius",
  "bbrr": "border-bottom-right-radius",
  "bbs": "border-bottom-style",
  "bbw": "border-bottom-width",
  "bc": "background-color",
  "bi": "background-image",
  "bl": "border-left",
  "blc": "border-left-color",
  "bls": "border-left-style",
  "blw": "border-left-width",
  "bo": "border",
  "boc": "border-color",
  "bor": "border-right",
  "borc": "border-collapse",
  "bords": "border-spacing",
  "bors": "border-style",
  "bos": "box-sizing",
  "bot": "bottom",
  "bp": "background-position",
  "br": "border-radius",
  "brc": "border-right-color",
  "brs": "border-right-style",
  "brw": "border-right-width",
  "bs": "box-shadow",
  "bt": "border-top",
  "btc": "border-top-color",
  "btlr": "border-top-left-radius",
  "btrr": "border-top-right-radius",
  "bts": "border-top-style",
  "btw": "border-top-width",
  "bv": "backface-visibility",
  "bw": "border-width",
  "c": "color",
  "cc": "column-count",
  "cg": "column-gap",
  "ci": "counter-increment",
  "cl": "clear",
  "cli": "clip",
  "co": "content",
  "cr": "counter-reset",
  "cu": "cursor",
  "d": "display",
  "di": "direction",
  "f": "float",
  "fd": "flex-direction",
  "ff": "font-family",
  "ffs": "font-feature-settings",
  "fg": "flex-grow",
  "fi": "filter",
  "fl": "flex",
  "fls": "flex-shrink",
  "flw": "flex-wrap",
  "fo": "font",
  "fos": "font-style",
  "fs": "font-size",
  "fv": "font-variant",
  "fw": "font-weight",
  "h": "height",
  "hy": "hyphens",
  "ir": "image-rendering",
  "jc": "justify-content",
  "l": "left",
  "lb": "line-break",
  "lh": "line-height",
  "lis": "list-style",
  "ls": "letter-spacing",
  "lsi": "list-style-image",
  "lsp": "list-style-position",
  "lst": "list-style-type",
  "m": "margin",
  "mah": "max-height",
  "mb": "margin-bottom",
  "mh": "min-height",
  "miw": "min-width",
  "ml": "margin-left",
  "mr": "margin-right",
  "mt": "margin-top",
  "mw": "max-width",
  "o": "overflow",
  "oc": "outline-color",
  "oo": "outline-offset",
  "op": "opacity",
  "or": "order",
  "orp": "orphans",
  "ou": "outline",
  "ovw": "overflow-wrap",
  "ow": "outline-width",
  "ox": "overflow-x",
  "oy": "overflow-y",
  "p": "position",
  "pa": "padding",
  "pb": "padding-bottom",
  "pba": "page-break-after",
  "pbi": "page-break-inside",
  "pe": "perspective",
  "pl": "padding-left",
  "pr": "padding-right",
  "pt": "padding-top",
  "r": "right",
  "re": "resize",
  "t": "top",
  "ta": "text-align",
  "tas": "tab-size",
  "td": "text-decoration",
  "ti": "text-indent",
  "tl": "table-layout",
  "to": "text-overflow",
  "tp": "transition-property",
  "tr": "transition",
  "tra": "transform",
  "trad": "transition-delay",
  "trd": "transition-duration",
  "tro": "transform-origin",
  "trs": "transform-style",
  "ts": "text-shadow",
  "tt": "text-transform",
  "ttf": "transition-timing-function",
  "ub": "unicode-bidi",
  "v": "visibility",
  "va": "vertical-align",
  "w": "width",
  "wb": "word-break",
  "wi": "widows",
  "wos": "word-spacing",
  "ws": "white-space",
  "ww": "word-wrap",
  "zi": "z-index"
}

Nearly identical to what tachyon's provides :-). Definitely would be great to add things like vertical padding (pv) and some of the higher-level classes.

Principles (WIP)

Based on vjuex's slides:

1. Don't mess with other CSS on the page

Use content-addressable hashing to prevent css from interacting with the global namespace (which you ideally shouldn't have)

2. Dependencies

Compose multiple stylesheets together using browserify or some JS loader

3. Dead Code Elimination

Find and Replace or static analysis of code (sorta project-specific). Is there a way to automate this?

4. Minification

Reduce classnames to small hashes (.hz5)

5. Sharing Constants between CSS and JS

I don't think this is a real concern anymore, just use getComputedStyle.

6. Non-deterministic Resolution

Wrap components in a single top-level class, don't load async unless you have to. If you're going to load things async, don't allow more than one "global class" and if it's already on the page, don't apply (or something like that).

7. Isolation

Don't allow cascading?