Dedupe in the template

Fix repeated markup in the template, not in CSS.

Adam Wathan@adamwathan

@kirkbushell Create template partials/Vue components/React components/whatever 👍🏻 duplication is absolutely best solved at the template level, not the CSS level.

Dec 20, 2019View on X ↗

Adam Wathan@adamwathan

@samselikoff @jeffrey_way @tailwindcss Even worse, most CSS is written as if you aren't allowed to reuse anything you already wrote. It's like writing FirstNameCapitalizer and LastNameCapitalizer classes that duplicate all the capitalization logic instead of writing a simple 'capitalize' function 🤦‍♂️

Apr 23, 2018View on X ↗

Rule and declaration counts are computed from the data each pane renders.

One change, six cards

Restyle the cards in each pane.

One class per cardBad

One templateGood

const people = [{ name: "Ada", role: "Design" } /* , five more */]

function Card({ name, role }) {
  return (
    <li className="rounded-[--r] border bg-card p-3 text-sm">
      <b>{name}</b> <span>{role}</span>
    </li>
  )
}

people.map((p) => <Card key={p.name} {...p} />)

Why it matters

A card is one idea. Writing it once in the template lets data carry the differences.

Pros

A design change is one edit, not one per variant
Variants become data, so new cards cost nothing
Less CSS to ship and to keep in sync

Cons

Needs a template or component layer
One shared template can grow flags over time
Hard-coded one-offs are quicker to write once

One change, six cards

Why it matters, pros and cons

Why it matters

Pros

Cons