Lesson 08

Arbitrary values with restraint

Use arbitrary values for specific layout constraints, not as a replacement for the shared design scale.

arbitrary-values
scale
maintainability

Good Code

CommandRow.tsx

export function CommandRow({ label, shortcut }: CommandRowProps) {
  // One arbitrary grid template captures the real layout constraint.
  return (
    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-slate-100">
      <span className="truncate text-slate-800">{label}</span>
      <kbd className="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-xs text-slate-500">
        {shortcut}
      </kbd>
    </div>
  );
}

Bad Code

CommandRow.tsx

export function CommandRow({ label, shortcut }) {
  // Bracket values everywhere make the component drift from the shared scale.
  return (
    <div className="grid grid-cols-[417px_68px] items-center gap-[11px] rounded-[7px] px-[13px] py-[9px] text-[13.5px] hover:bg-[#f1f5f9]">
      <span className="max-w-[391px] truncate text-[#1f2937]">{label}</span>
      <kbd className="rounded-[3px] border border-[#e2e8f0] bg-[#ffffff] px-[5px] py-[2px] text-[11px] text-[#64748b]">
        {shortcut}
      </kbd>
    </div>
  );
}

Review Notes

What to review

Good Code

The good version uses one arbitrary grid template because the layout needs a flexible text column plus an auto shortcut column.

Bad Code

The bad version uses arbitrary values for nearly every decision. That makes the component hard to align with the rest of the UI.

Takeaways

Arbitrary values are a precision tool; overuse makes the design system invisible to reviewers.